loop javascript function for each row after add new row

Question

I have a row in a table that can be duplicated by javascript. In the first row I have a javascript code that makes a calculation.

After duplicating a new row the calc javascript is not working for the new row..

What i do wrong?

table row:

code to create a new row:

javascript code to calculate:

function CalcUnitValue() {
    var U = document.getElementById("Unit").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;
}

function changeCost() {
    var C = document.getElementById("Cost").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;
}

function changeAmount() {
    var C = document.getElementById("Amount").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;

}

function changeUnit() {
    var C = document.getElementById("Amount").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;

}

function minisum() {
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    return alert(document.getElementById('minisuminput').innerHTML);

thank you :)

iCollect.it Ltd · Accepted Answer

Your HTML is invalid. You have an extra closing in the middle. You also need to put the form outside the table.
You can't have duplicate IDs in a HTML page and expect to reference anything except the first one. Use classes instead.
Don't use inline event handlers with jQuery. Use delegated jQuery handlers if you have dynamically added elements.
Use an element hidden in the page to hold your template. If you store it in the HTML, and not code, you would have noticed your was missing and replaced by an extra .
You mix JavaScript selectors with jQuery. Just stick to jQuery selectors. They are shorter.
None of the extra parenthesis are required for a * b * c * d equations.
inputs and img elements are meant to be self-closing, not have end tags.
All your calculations are exactly the same, so reuse the code.
Get into the habit on using consistent case (upper/lower/mixed) for variables and classes.

Use delegated event handlers like this:

$(document).on('change', '.cost,.amount,.unit,.parameters', function() {
    var $tr = $(this).closest('tr');
    var sum = -1 * $('.Amount', $tr).val() * $('.cost', $tr).val() * $('.Unit', $tr).val();
    $(".minisum", $tr).html(sum);
}

Re templating: you can store your template row in a dummy script block, with unknown type (I use text/template) and it will be ignored by the browser.

e.g.

You will note a {counter} placeholder where you wanted to insert a new value. Use it as the HTML source to create new rows.

e.g.

$('table.Parameter#new').append($('#template').html().replace('{counter}', counter));

JSFiddle to play with ( most of this functional): https://jsfiddle.net/TrueBlueAussie/33e9ptgu/

loop javascript function for each row after add new row

Answers (2)

Related Questions