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

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

---

and a sample knockout viewmodel in javascript:

// 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());
})

---

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