Automatically update input field using math using jquery?

Question

Ok I need help, I have an online calculator where I need to get a linear counter from two input fields. I need this to be automatic when they enter data. I have no idea how to do this .. any help with coding would be greatly appreciated! Here is the html:

<input type="text" name="ancho" /> <input type="text" name="alto" /> <input type="text" name="material" /> 

I need this to output to this field:

 <input type="text" name="ml" /> 

Here is the equation for the mathematical side: (material / 100) / ((alto / 100) * (ancho / 100))

Thanks in advance for this help!

Answer 1

Sigh I do not see many errors when checking here in solutions, so I thought I would send another ...

 // locate all the input fields on the page $(':input') // bind to anything change related (down to keyboard changes so the element // won't need to lose focus, or the user won't have to press enter) .bind('keypress keydown keyup change',function(){ // retrieve the values of the inputs (we also call parseFloat to confirm // we are dealing with numeric values) var acho = parseFloat($(':input[name="acho"]').val(),10), alto = parseFloat($(':input[name="alto"]').val(),10), matl = parseFloat($(':input[name="material"]').val(),10); // default the end result to an empty string (you'll see // why with the following statement) var v = ''; // confirm that all three values that go in to the equation are // all numbers before we try to perform any math functions. If // all goes well, "v" above will have the actual resulting value. // if any number is invalid, the "Result" field (ml) gets emptied if (!isNaN(acho) && !isNaN(alto) && !isNaN(matl)){ // your math function v = (matl / 100) / ((alto / 100) * (acho / 100)); } // replace the value of "ml" with our new calculated value $(':input[name="ml"]').val(v.toString()); }); 

... with a demo

Answer 2

Try the following:

 $('input[name="material"],input[name="ancho"],input[name="alto"]').change(function(){ $('input[name="ml"]').val(($('input[name="material"]').val() / 100) / (($('input[name="alto"]').val() / 100) * ($('input[name="ancho"]').val() / 100))); }) 

A jsFiddle is here.

Answer 3

Use $('input[name="yourName"]').val() to get the value in each input, and then apply the formula.

To set the final result in the result field, use $('input[name="yourName"]').val(results)

sort of:

 $('input').blur(function(){ //Get values var ancho= $('input[name="ancho"]').val(); var alto= $('input[name="alto"]').val(); var material= $('input[name="material"]').val(); //Calculate results var results = (material/100) / ((alto/100) * (ancho/100)); //update output $('input[name="ml"]').val(results); }); 

You can put the logic in a blur/change event handler to enter

jsFiddle

Answer 4

this will be updated as you enter any of the fields. untested.

 $('input').keyup(function(){ var material = $('input[name="material"]').val(), alto = $('input[name="alto"]').val(), ancho = $('input[name="ancho"]').val(), result; if (material != "" && alto != "" && ancho != ""){ result = (material/100) / ((alto/100) * (ancho/100)); $('input[name="ml"]').val(result); } });