check validations of form whenever a change in textfield occurs just like in gmail signup form

Question

i have a code for multiplication of two numbers using java scripting but my objective is to perform operation without using that button and it should occur with both text-field pair. As soon as both input is given in both text-fields, the multiplication function should kick in automatically without any button usage and regardless of anything the two text-field should show output as per their values given in text-fields.

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">

function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc1.value2.value;
z=x*y;
calc1.value3.value=z
}
</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :   
<input
   id="value1"
   type       = "text" 
   onchange   = "Multiplication();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   onloadstart     ="this.onchange();"
   
   value   = "5"
/></form>
 </br><form name="calc1">
Enter Second Numeric Value : 

<input
   id="value2"
   type       = "text" 
   onchange   = "Multiplication();"
   onloadstart="this.onchange();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "1"
/> 
 </br>
 </br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>

<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :   
<input
   id="value1"
   type       = "text" 
   onchange   = "Multiplication();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   onloadstart     ="this.onchange();"
   
   value   = "5"
/></form>
 </br><form name="calc1">
Enter Second Numeric Value : 

<input
   id="value2"
   type       = "text" 
   onchange   = "Multiplication();"
   onloadstart="this.onchange();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "1"
/> 
 </br>
 </br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

Using what mentioned here: https://stackoverflow.com/a/14187495/2655623

The result is:

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">

function Multiplication()
{
var x,y,z;
x=calc.value1.value;
y=calc.value2.value;
z=x*y;
calc.value3.value=z;
}

</script>
</head>
<body>
<form name="calc">
<h1>Online Calculator</h1>
Enter first Numeric Value :   
<input
   id="value1"
   type       = "text" 
   onchange   = "Multiplication();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "5"
/>
 </br>
Enter Second Numeric Value : 

<input
   id="value2"
   type       = "text" 
   onchange   = "Multiplication();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "5"
/> 
 </br>
 </br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
<input type="button" Value="Multiplication" onClick=Multiplication()></br>

<script>
Multiplication(); // call this when you want to run the function on page load.
</script>

</form>
</body>
</html>

edited May 23 '17 at 12:05

Community

1
1

answered May 16 '15 at 14:25

Soley

1,716
1
19
33

I have another problem with this code now... what if i put default values of both textfield as 5, then as soon as i refresh page, i want that it shows 25 in output not that i have to change any text-field data first to see output – ksumit May 21 '15 at 15:59
I added a new script tag at the end of form. That is because letting the page find the input objects and then use them. If you add it before the form, because it is not yet loaded, there will be an error that will say "calc is null, etc...". However, you can mock the mock the process by setting the values of text boxes to 5 and the value of value3 to 25 :D – Soley May 22 '15 at 09:21
plzzz look the question again as i have edited it again. I want to perform the Multiplication function on more than one place on same page but it wont give desired answer as i want – ksumit May 22 '15 at 11:40
yes, it will not work like that, because your texts have same "id"s. Let me check and edit it :) – Soley May 22 '15 at 14:34
plzz sugesst a way for this as i want to make a orderlist and in that the number of output(products) could vary from 1 to any number :) – ksumit May 22 '15 at 14:39
I changed the post. for your previous question. check it out below. – Soley May 22 '15 at 14:50

score 0 · Answer 2 · answered May 22 '15 at 14:48

You have more mistakes in your page. Here is what I edited.

added two other functions for simplicity, called calcForm1() and calcForm2().
change the function of onChange() of your texts to proper function.
change the id of your forms and merged them. You have 4 forms there, and you have put each text in one form with the same id, which it is wrong. I removed the second form of each forms and just left one calc1 and one calc2. You had 4 calc forms there. And of you don't want to send any of these forms to any page, remove forms and just use the texts. Also change the ids of forms and access to text objects as well, (calc2.value2... to text_2_2, etc...)
call calcForm1() and calcForm2() to calculate the values when the page is loaded.

That's it :)

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
 var x,y,z;
 x=o1.value;
 y=o2.value;
 z=x*y;
 o3.value=z
}
function calcForm1(){
 Multiplication(calc1.value1, calc1.value2, calc1.value3);
}
function calcForm2(){
 Multiplication(calc2.value1, calc2.value2, calc2.value3);
}
</script>
</head>
<body>
<form name="calc1">
<h1>Online Calculator</h1>
Enter first Numeric Value :   
<input
   id="value1"
   type       = "text" 
   onchange   = "calcForm1()"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   onloadstart     ="this.onchange();"
   
   value   = "5"
/> 
 </br>
Enter Second Numeric Value : 

<input
   id="value2"
   type       = "text" 
   onchange   = "calcForm1()"
   onloadstart= "this.onchange();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "1"
/> 
 </br>
 </br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>

<form name="calc2">
<h1>Online Calculator</h1>
Enter first Numeric Value :   
<input
   id="value1"
   type       = "text" 
   onchange   = "calcForm2()"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   onloadstart     ="this.onchange();"
   
   value   = "5"
/> 
 </br> 
Enter Second Numeric Value : 

<input
   id="value2"
   type       = "text" 
   onchange   = "calcForm2()"
   onloadstart= "this.onchange();"
   onkeypress = "this.onchange();"
   onpaste    = "this.onchange();"
   oninput    = "this.onchange();"
   value   = "1"
/> 
 </br>
 </br>
Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
</form>

<script>
 calcForm1();
 calcForm2();
</script>

</body>
</html>

the problem with me is that the number of arthmetic multiplication to occur depends on number of products selected by certain user and i have to use the form at 1 time only as the same form would be used in a loop.. thus is there any way that a single multiplication code could be run on more than 1 occassion — ksumit, May 22 '15 at 14:57
this is what i have in my coding price quantity total thus when a user adds product then a loop is initiated and it would perform multiplication operation as per quantity and the products are fetched using a loop thus i cant use multiple functions.................. — ksumit, May 22 '15 at 15:02

score 0 · Accepted Answer · answered May 22 '15 at 15:03

I think this is what you are looking for:

Change the count which it indicates the number of forms.

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
 var x,y,z;
 x=o1.value;
 y=o2.value;
 z=x*y;
 o3.value=z
}
function calcForm(formNode){
 Multiplication(formNode.value1, formNode.value2, formNode.value3);
}
</script>
</head>
<body>
<div style="display:none">
<form name="calc">
 <h1>Online Calculator</h1>
 Enter first Numeric Value :   
 <input
    id="value1"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    onloadstart     ="this.onchange();"
    
    value   = "5"
 /> 
  </br>
 Enter Second Numeric Value : 

 <input
    id="value2"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onloadstart= "this.onchange();"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    value   = "1"
 /> 
  </br>
  </br>
 Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
 </form>
</div>

<div id="i_container">
</div>

<script>
 count = 15;
 my_parent = document.getElementById('i_container');
 for(i=0; i<count; i++){
  nw = calc.cloneNode(true);
  nw.name = "dynamic_name_"+i;
  nw.id = "dynamic_id_"+i;
  my_parent.appendChild(nw);
 }
 for(i=0; i<count; i++){
  p = document.getElementById("dynamic_id_"+i);
  calcForm(p);
 }
</script>

</body>
</html>

can u modify this code so that the count is initialised at run time and does multiplication as per numbers added — ksumit, May 22 '15 at 15:08
That is beyond the scope of the first question. You have to try the codes yourself and when you get in trouble, ask it here. However, I added another answer. :) — Soley, May 22 '15 at 15:16

score 0 · Answer 4 · answered May 22 '15 at 15:16

Check this out.

If you have another question, please create a new one so, others can participate.

<html>
<head>
<title>Arithmetic operations</title>
</head>
<script type="text/javascript">
function Multiplication(o1, o2, o3){
 var x,y,z;
 x=o1.value;
 y=o2.value;
 z=x*y;
 o3.value=z
}
function calcForm(formNode){
 Multiplication(formNode.value1, formNode.value2, formNode.value3);
}
</script>
</head>
<body>
<div style="display:none">
<form name="calc">
 <h1>Online Calculator</h1>
 Enter first Numeric Value :   
 <input
    id="value1"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    onloadstart     ="this.onchange();"
    
    value   = "5"
 /> 
  </br>
 Enter Second Numeric Value : 

 <input
    id="value2"
    type       = "text" 
    onchange   = "calcForm(this.parentNode)"
    onloadstart= "this.onchange();"
    onkeypress = "this.onchange();"
    onpaste    = "this.onchange();"
    oninput    = "this.onchange();"
    value   = "1"
 /> 
  </br>
  </br>
 Result of the Arithmetic operation is : <output type="number" id="value3"> </output></br>
 </form>
</div>
 Number of forms: <input id="number_of_forms" value="1"> <input onclick="createForms()" type="button" value=" < Create > ">
<div>

</div>
<div id="i_container">
</div>

<script>
 function createForms(){
  count = document.getElementById('number_of_forms').value;
  my_parent = document.getElementById('i_container');
  my_parent.innerHTML="";
  for(i=0; i<count; i++){
   nw = calc.cloneNode(true);
   nw.name = "dynamic_name_"+i;
   nw.id = "dynamic_id_"+i;
   my_parent.appendChild(nw);
  }
  for(i=0; i<count; i++){
   p = document.getElementById("dynamic_id_"+i);
   calcForm(p);
  }
 }
</script>

</body>
</html>

would be helpful if you could take a look at this problem and provide some solution problem URL- https://stackoverflow.com/questions/30476335/perform-addition-of-1-form-with-dynamic-values-and-show-it-in-another-form-on-sa — ksumit, May 27 '15 at 07:56

check validations of form whenever a change in textfield occurs just like in gmail signup form

4 Answers4

Linked