Autosum With Generated Fields Js

I'm a bit stuck with javascript again. Basically when you click a button a new row of fields will appear, giving them a new name just a different number. I now need these fields to

Solution 1:

In the end I managed to find a way on how to do this myself, if anyone is interested take a look at this:

http://jsfiddle.net/2sYgE/

var currentItem = 1;

$('#customersAdd').on('keyup', '.quantity, .rate, .amount', calculateRow);

$('#addnew').click(function() {
    currentItem++;

    $('#customersAdd').append('<tr><td><input placeholder="Quantity" type="text" name="quantity' + currentItem +'" id="quantity' + currentItem +'" class="qty form-input-rate" /></td><td><input placeholder="Description" type="text" name="description' + currentItem +'" id="description' + currentItem +'" class="form-input-rate"/></td><td><input placeholder="Rate" type="text" name="rate' + currentItem +'" id="rate' + currentItem +'" class="rate form-input-rate"/></td><td><input placeholder="Amount" type="text" name="amount' + currentItem +'" id="amount' + currentItem +'" class="cal form-input-rate"/></td></tr>'
    );
});

functioncalculateSum() {
    var sum = 0;
    $(".cal").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });

}

functioncalculateRow() {
    var cost = 0;
    var $row = $(this).closest("tr");
    var qty = parseFloat($row.find('.qty').val());

    // changed the following line to only look within the current rowvar rate = parseFloat($row.find('.rate').val());

    cost = qty * rate;

    if (isNaN(cost)) {
        $row.find('.cal').val("0");
    } else {
        $row.find('.cal').val(cost);
    }
    calculateSum();
}

Solution 2:

Polling for changes is a very inefficient and error–prone way to do form updates. Listening for change events is a better way to go as it uses fewer resources and waits until the user has finished updating the control before doing anything. There is also an input event that can be used, but it's not suitable here as it will update the form as the user enters values. Much better to wait for the user to finish entering values, then do the update.

I've re–factored your code below, it's not ready for production but it should give you some idea of how to go about it. Table rows are cloned as it's much faster than creating all the elements from scratch. Then names are modified, though this isn't really necessary. There is no need for ID attributes.

Cloning only works reliably here if inline listeners are used on the form controls. If the initial listeners are dynamically attached, you'll have to add them each time a row is added as listeners added using addEventListener are not cloned.

I haven't included any input validation, if the user puts in junk, they get junk back. You should validate input to check that appropriate values are being entered, and also format the displayed values for presentation.

<scripttype="text/javascript">functionaddRow(element) {
      var form = element.form;
      var table = form.getElementsByTagName('table')[0];
      var tbody = table.tBodies[0];
      var num = tbody.rows.length - 1;
      var row = table.rows[1].cloneNode(true);
      var input, inputs = row.getElementsByTagName('input')

      // Update input namesfor (var i=0, iLen=inputs.length; i<iLen; i++) {
        input = inputs[i];
        input.name = input.name.replace(/\d+$/,num);
        input.value = '';
      }
      tbody.insertBefore(row, tbody.rows[tbody.rows.length - 1]);
  }

  functionupdateRow(element) {
    var form = element.form;
    var num = element.name.replace(/^\D+/,'');
    var value = form['quantity' + num].value * form['rate' + num].value;
    form['amount' + num].value =  (value == 0)? '' : value;
    updateTotal(form);
  }

  functionupdateTotal(form) {
    var elements = form.elements;
    var name = /^amount/;
    var total = 0;
    var value;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      if (name.test(elements[i].name)) {
        total += parseFloat(elements[i].value);
      }
    }
    form.total.value = total;
  }
</script><formaction="submit.php"name="main"method="post"><tablestyle="border-collapse: collapse;"border="0"align="center"width="50%"class="horiz"id="customersAdd"><tr><td><br><inputclass="text"style="width:100%"type="button"align="middle"value="Add Aditional Row"onclick="addRow(this)"></td></tr><tr><td><inputplaceholder="Quantity"name="quantity1"onblur="updateRow(this);"></td><td><inputplaceholder="Description"type="text"name="description1"></td><td><inputplaceholder="Rate"name="rate1"onchange="updateRow(this);"></td><td><inputplaceholder="Amount"name="amount1"readonly></td></tr><tr><tdcolspan="3"style="text-align: right">Total&nbsp;<td><inputname="total"readonly></tr></table><inputtype="reset"></form>