How to use value in input type number for calculate and set value in to other input?

Question

How to use value in input type number for calculate and set value in to other input ?

When fill value into input id xxx for this case fill 5 i want to use that value for multiple with 3 and get value 15 into input id yyy

How can i do ?

 <p> <input name="xxx" type="number" id="xxx" onkeydown="return isNumber(event)"> </p> <p> <input name="yyy" type="number" id="yyy" disabled > </p> <script> function isNumber(number_check) { number_check = (number_check) ? number_check : window.event; var charCode = (number_check.which) ? number_check.which : number_check.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } </script> 

Answer 1

Since the input #xxx is type number, you don't need to return false is the value isn't a number... It just can't happen.

So you just have to get the value and parse it to an integer (the value type of an input is text) to perform math operations on it.

Then, the right events to do it is keyup, more than keydown (since the value isn't yet in the field at this moment) or on change.

 $("#xxx").on("keyup change", function(){ $("#yyy").val( parseInt($("#xxx").val())*3 ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input name="xxx" type="number" id="xxx"> </p> <p> <input name="yyy" type="number" id="yyy" disabled > </p> 

Answer 2

You can do it with a simple function

 function isNumber(number_check) { number_check = (number_check) ? number_check : window.event; var charCode = (number_check.which) ? number_check.which : number_check.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } var multiplyBy3 = function() { var x = document.getElementById("xxx").value; document.getElementById("yyy").value = x * 3; } 

 <p> <input name="xxx" type="number" id="xxx" onkeydown="return isNumber(event)"> </p> <button onclick="multiplyBy3()">Multiply By 3</button> <p> <input name="yyy" type="number" id="yyy" disabled > </p>