Function JS does not perform calculation

Question

Function JS does not perform calculation

Navigation

#1 by (6 votes)

4

I created a form that is added to the page with a button. I used JS to create the form to be added. The problem is that I have two fields one of value and another of hours, to count the value of the time worked. Then I applied to the input that receives the value data and time the function:

onblur="value();".

Value:

input name="horas" id="horas" type="text" value="" onblur="value();" class="form-control"

Time:

input name="valor" id="valor" type="text" value="" onblur="value();" class="form-control

This value function is as follows:

function value(){  
  var val= $("input[name*='valor]']").maskMoney('unmasked')[0];    
  var hs= Number($("input[name*='horas']").val());  
  var resul= (hours == 0 ? 0 : val/hs);  
  $('#resulVal').val(resulVal.toFixed(2).replace('.', ','));  
}

When I add only ONE FORM, the function performs the account. But when adding more than one form the following do not make the account, it is as if the function was not activated for the others. What to do?

javascript jquery

asked by anonymous 11.08.2015 / 15:52

1 answer

How to do a redirect via .htaccess? Error with regular expression in PHP

score 6 · Accepted Answer

From what I noticed your page has n forms with a structure similar to the following:

<form id="form1">
    <input name="horas" type="text" onblur="value();" />
    <input name="valor" type="text" onblur="value();" />
    <input name="resulVal" type="text" />
</form>
<form id="form2">
    <input name="horas" type="text" onblur="value();" />
    <input name="valor" type="text" onblur="value();" />
    <input name="resulVal" type="text" />
</form>
...
<form id="formN">
    <input name="horas" type="text" onblur="value();" />
    <input name="valor" type="text" onblur="value();" />
    <input name="resulVal" type="text" />
</form>

In this case, at the time of making the selection, it is important to define a scope, in this case the scope is the closest form, ie the form the input belongs to.

function value(){  
    var elem = $(this);
    var escopo = elem.closest("form");
    var input = {
        valor: $("input[name='valor']", escopo),
        horas: $("input[name='horas']", escopo),
        result: $("input[name='resulVal']", escopo)
    };

    var valor = input.valor.maskMoney('unmasked')[0];    
    var horas = Number(input.horas.val());  
    var result = (horas == 0 ? 0 : valor/horas);  
    input.result.val(result.toFixed(2).replace('.', ','));  
}

Optionally, it is interesting to register the event with .on() of jQuery, instead of doing it inline:

$(document).on("blur", "input[name='valor'], input[name='horas']", function (){  
    var elem = $(this);
    var escopo = elem.closest("form");
    var input = {
        valor: $("input[name='valor']", escopo),
        horas: $("input[name='horas']", escopo),
        result: $("input[name='resulVal']", escopo)
    };

    var valor = input.valor.maskMoney('unmasked')[0];    
    var horas = Number(input.horas.val());  
    var result = (horas == 0 ? 0 : valor/horas);  
    input.result.val(result.toFixed(2).replace('.', ','));  
})

PS: Since you are adding these forms dynamically, I advise you not to assign an id to the inputs, or at least to put some prefix (as I did with form ), remember that the id must be unique .