How To Get Dynamic Form Input Values In Javascript In Yii2?

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

Solution 1:

You can mention class to input boxes like below or if the class already exist then utilize the same.

HTML code

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

Jquery code :

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

Solution 2:

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):

<uldata-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']) ?><spandata-bind="text: total"></span></li></ul><pdata-bind="text: sum"></p><p><ahref="#"class="btn btn-default"data-bind="click: addItem">add new item</a><ahref="#"class="btn btn-default"data-bind="click: submit">submit</a></p><codedata-bind="text: ko.toJSON($data)"></code>

---

and a sample knockout viewmodel in javascript:

// viewmodel for an item, with title, price, units and computed totalvar 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 DOMvar vm = function() {
    var self = this;

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

    // computed sum of all item's totalsthis.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 rowthis.addItem = function() {
        self.items.push(newitem({title: '<title>'}));
    }

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

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

---

requires to load knockoutjs library. i also used jquery, which is not a requirement for knockout.