How to get dynamic form input values in JavaScript function? following code working only for zero index input values not for all
$this->registerJs(
'$(document).ready(function(){
$("#quotationitem-0-unit_price").change(function(){
var unit_value = $("#quotationitem-0-unit_price").val();
var qty_value = $("#quotationitem-0-quantity").val();
var total=Number(unit_value) * Number(qty_value);
$("#quotationitem-0-amount").val(total);
});
});', \yii\web\View::POS_END);
View code as per follows I want to calculate total amount when cursor moves from price_unit :
<?php
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use yii\bootstrap\Modal;
use backend\models\Company;
use backend\models\Item;
use backend\assets\AppAsset;
use wbraganca\dynamicform\DynamicFormWidget;
use dosamigos\datepicker\DatePicker;
$this->registerJs(
'$(document).ready(function(){
$("#quotationitem-0-unit_price").change(function(){
var unit_value = $("#quotationitem-0-unit_price").val();
var qty_value = $("#quotationitem-0-quantity").val();
var total=Number(unit_value) * Number(qty_value);
$("#quotationitem-0-amount").val(total);
});
});', \yii\web\View::POS_END);
?>
<div class="quotation-form">
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">New Quotation</h2>
</div>
<div class="panel-body">
<div class="col-lg-12">
<div class="col-lg-8">
<?= $form->field($model, 'summary')->textInput(['placeholder' => 'Type quotation summary here...'])->label(false) ?>
<div class="col-lg-8 col-sm-12 col-xs-12">
<div class="input-group">
<?= $form->field($model, 'address_from')->dropDownList(ArrayHelper::map(Company::find()->all(), 'id', 'companyName'), ['prompt' => 'Select Company',
'onchange' =>
'$.get("?r=quotation/comp-dtls&id="+$(this).val(), function(data){
$("#fromdtls").val(data);
});
$.get("?r=quotation/get-image&id="+$(this).val(), function(success) {
$(".putimg").html(success);
})
'
])?>
<span class="input-group-btn" style="padding: 25px 0px;">
<button id="modalButtonCompany" class = "btn btn-default" type = "button" value="?r=quotation/createcompany">
+
</button>
</span>
</div>
<div class="form-group">
<textarea rows="4" cols="40" class="form-control" id="fromdtls"></textarea>
</div>
<div class="input-group">
<?= $form->field($model, 'address_to')->dropDownList(ArrayHelper::map(Company::find()->all(), 'id', 'companyName'), ['prompt' => 'Select Company',
'onchange' =>
'$.get("?r=quotation/comp-dtls&id="+$(this).val(), function(data){
$("#todtls").val(data);
})'
])?>
<span class="input-group-btn" style="padding: 25px 0px;">
<button id="modalButtonCompany2" class = "btn btn-default" type = "button" value="?r=quotation/createcompany">
+
</button>
</span>
</div>
<div class="form-group">
<textarea rows="4" cols="40" class="form-control" id="todtls"></textarea>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" >
<?= $form->field($model, 'date')->widget(
DatePicker::className(), [
'clientOptions' => [
'autoclose' => true,
'format' => 'yyyy-m-dd'
]
]);?>
<?= $form->field($model, 'quote_number')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'quotation_validity')->dropDownList([ '1 day' => '1 Day', '5 days' => '5 Days', '10 days' => '10 Days', ], ['prompt' => '']) ?>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="putimg">
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 10, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsQuotationItem[0],
'formId' => 'dynamic-form',
'formFields' => [
'id',
'item_id',
'description',
'quantity',
'unit_price',
'amount',
],
]); ?>
<div class="container-items"><!-- widgetContainer -->
<?php foreach ($modelsQuotationItem as $i => $modelsQuotationItem): ?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="panel-heading">
<h3 class="panel-title pull-left">Item Details</h3>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<?php
// necessary for update action.
if (! $modelsQuotationItem->isNewRecord) {
echo Html::activeHiddenInput($modelsQuotationItem, "[{$i}]id");
}
?>
<div class="row">
<div class="col-lg-3">
<div class="input-group">
<?= $form->field($modelsQuotationItem, "[{$i}]item_id")->dropDownList(
ArrayHelper::map(Item::find()->all(), 'id', 'name'),
['prompt' => 'Select Item',
'onchange' =>
'$.get("?r=quotation/item-dtls&id="+$(this).val(), function(data){
})'
])?>
<span class="input-group-btn" style="padding: 25px 0px;">
<button id="modalButtonItem" class = "btn btn-default" type = "button" value="?r=quotation/createitem">
+
</button>
</span>
</div>
</div>
<div class="col-sm-3">
<?= $form->field($modelsQuotationItem, "[{$i}]description")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-2">
<?= $form->field($modelsQuotationItem, "[{$i}]quantity")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-2">
<?= $form->field($modelsQuotationItem, "[{$i}]unit_price")->textInput(['maxlength' => true ])?>
</div>
<div class="col-sm-2">
<?= $form->field($modelsQuotationItem, "[{$i}]amount")->textInput(['maxlength' => true])?>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
<div class="col-lg-9"></div>
<div class="col-lg-3">
<?= $form->field($model, 'sub_total')->textInput(['maxlength' => true, 'value' => '0.00']) ?>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
</div>
<div class="col-lg-12">
<?= $form->field($model, 'notes')->textArea(['rows' => 4]) ?>
</div>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Save') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success pull-right' : 'btn btn-primary pull-right' ]) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
<?php
Modal::begin([
'header' => '<h4>Add New Company</h4>',
'id' => 'modalCompany',
'size' => 'modal-md',
]);
echo '<div id="modalContentCompany"></div>';
Modal::end();
?>
<?php
Modal::begin([
'header' => '<h4>Add New Item</h4>',
'id' => 'modalItem',
'size' => 'modal-md',
]);
echo '<div id="modalContentItem"></div>';
Modal::end();
?>
You can mention class to input boxes like below or if the class already exist then utilize the same.
HTML code
Jquery code :
for all dynamic forms i am using knockoutjs
the benefit is, you can make (writeable) computed vars like sums or totals (=units * price)
using
observableArray
will also help you keep your html clean. here an example html (note the 'data-bind
' options):and a sample knockout viewmodel in javascript:
requires to load knockoutjs library. i also used jquery, which is not a requirement for knockout.