JS function does not perform calculation

Asked

Viewed 74 times

4

I created a form that is added to the page through a button. I used JS to create the form to be added. The problem is that I have two fields one of value and the other of hours, to account for the value of the hour worked. Then I applied the input that receives the value and time given to the function: 

onblur="value();".

Valor:

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 account, it is as if the function was not activated for the others. What to do?

javascript jquery

  • When you say "don’t realize the account", do you make a mistake? or just don’t show up what you wanted?

  • I believe it must have something to do with name or the id of the element

  • Friend, this "a form", you added it by manipulating the DOM with javascript too ? If you make an example in Jsfiddle it is easier for us to help. But one thing that can happen is in relation to the formularies for being added dynamically. Before in Jquery there was a function called $.live that treated events in dynamic elements, today there is another way to treat these events.

1 answer

6


From what I noticed your page has n Rmularios 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, when making the selection, it is important to define a scope, in this case the scope is the closest form, ie the form to which the input belongs.

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 that you register the event through the .on() 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('.', ','));  
})

P.S: As you are adding these formularies dynamically, I advise you not to assign an id to the inputs, or at least to put some prefix (just like I did with the form), remember that the id must be unique.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.