yii2でJavaScriptの動的フォーム入力値を取得する方法は？

Question

JavaScript関数で動的フォーム入力値を取得するにはどうすればよいですか？ 私は価格の単位からの時にカーソルが移動合計金額を計算したい、次のとおりにのみ、ゼロインデックス入力値のためのすべてではない

$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); 

ビューコードのために働いて次のコード：

<?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(); 
?> 

Answer 1

あなたは以下のような入力ボックスにクラスを言及することもできますし、クラスがすでに存在する場合は同じものを使用することもできます。

HTMLコード

<div class="box" data-id="caption"> 
<input type="text" name="quantity" value="" class="quantity"> 
<input type="text" name="price" value="" class="price"> 
<input type="text" name="total" value="" class="total"> 
</div> 
<div class="box" data-id="caption"> 
<input type="text" name="quantity" value="" class="quantity"> 
<input type="text" name="price" value="" class="price"> 
<input type="text" name="total" value="" class="total"> 
</div> 

のjQueryコード：すべての動的な形態のため

$("body").delegate('#quotationitem-0-unit_price', 'change', function() { 
    var total = $(this).val() * $(this).prev().val(); 
    $(this).next().val(total); 
}); 

Answer 2

私は利点がある、あなたは（書き込み可能）を計算することができますknockoutjs

を使用しています合計または合計（例えば、単位*価格）のようなvars

observableArrayを使用すると、htmlをきれいに保つのに役立ちます。 ここでの例のHTML（ 'data-bind' オプションに注意してください）：

<ul data-bind="foreach: items"> 
    <li><?= Html::textInput('title', null, ['data-bind' => 'value: title']) ?> <?= Html::textInput('units', null, ['data-bind' => 'value: units']) ?> <?= Html::textInput('price', null, ['data-bind' => 'value: price']) ?> <span data-bind="text: total"></span></li> 
</ul> 
<p data-bind="text: sum"></p> 
<p> 
    <a href="#" class="btn btn-default" data-bind="click: addItem">add new item</a> 
    <a href="#" class="btn btn-default" data-bind="click: submit">submit</a> 
</p> 
<code data-bind="text: ko.toJSON($data)"></code> 

---

とJavaScriptのサンプルノックアウトのviewmodel：

// viewmodel for an item, with title, price, units and computed total 
var item = function(data) { 
    var self = this; 
    data  = data || {}; 
    this.title = ko.observable(data.title || ''); 
    this.price = ko.observable(data.price || 0); 
    this.units = ko.observable(data.units || 0); 
    this.total = ko.computed(function() { return (self.price() * self.units()).toFixed(2); }); 
} 

// app viewmodel, which is bound to your DOM 
var vm = function() { 
    var self = this; 

    // array of items 
    this.items = ko.observableArray([new item({title: 'item 1', units: 1, price: 12.34}), new item({title: 'item 2', units: 2, price: 23.45}), new item()]); 

    // computed sum of all item's totals 
    this.sum = ko.computed(function() { 
     var sum = 0; 
     for (var i = self.items().length - 1; i >= 0; i--) { 
      sum += parseFloat(self.items()[i].total()); 
     } 
     return sum.toFixed(2); 
    }) 

    // function bound to click event of a button, to add a new row 
    this.addItem = function() { 
     self.items.push(new item({title: '<title>'})); 
    } 

    // handle your form submission here 
    this.submit = function() { 
     alert(ko.toJSON(self)); 
    } 
} 

$(document).ready(function() { 
    // bind your viewmodel 
    ko.applyBindings(new vm()); 
}) 

---

はknockoutjs libraryをロードする必要があります。私はノックアウトの要件ではないjqueryも使用しました。