Two forms on one page AJAX

Found this script, it's working great, but I want to add a second form. When I do, the first form + result works well, but when I press the submit button of the second form, it updates the result of the first form.

I know it has something to do with

 function updatepage(str){
 document.getElementById('result').value = str;
 }

but if I change it to

 function updatepage(str){
 document.getElementById('result2').value = str;
 }

it is the other way around. I need to find a method whereby I can can submit and get results of both forms separately.

Any idea how I can get the result in the second form?

Here are the scripts

mult.html

<html>
 <head>
 <title>Ajax Multiply Example</title>
 <script language="Javascript">
 function postRequest(strURL){
 var xmlHttp;
 if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
 var xmlHttp = new XMLHttpRequest();
 }
 else if(window.ActiveXObject){ // For Internet Explorer
 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlHttp.open('POST', strURL, true);
 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 xmlHttp.onreadystatechange = function(){
 if (xmlHttp.readyState == 4){
 updatepage(xmlHttp.responseText);
 }
 }
 xmlHttp.send(strURL);
 }
 
 function updatepage(str){
 document.getElementById('result').value = str;
 }
 
 function callMultiply(){
 var a = parseInt(document.f1.a.value);
 var url = "multiply.php?a=" + a + "";
 postRequest(url);
 }
 
  function callMultiplyVita(){
 var b = parseInt(document.f2.b.value);
 var url = "multiplyVita.php?b=" + b + "";
 postRequest(url);
 }
 </script>
 </head>
 
 <body>
 <h1 align="center"><font color="#000080">Ajax Example</font></h1>
 <form name="f1">
 <input name="a" id="a" value="">
 <input name="result" type="text" id="result">
 <input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
 </form>
 
 <form name="f2">
 <input name="b" id="b" value="">
 <input name="result2" type="text" id="result2">
 <input type="button" value="Multiply" onClick="callMultiplyVita()" name="showmultiply2">
 </form>
 </body>
</html>

and multiply.php

<?
 $a=$_GET["a"];
 $b=10;
 $mul=$a*$b;
 echo $mul;
?>

and multiplyVita.php

<?
 $b=$_GET["b"];
 $qq="100";
 $mull=$b*$qq;
 echo $mull;
?>

Thanks for the help!
Okoth

Two forms on one page AJAX

Submit second form, changes result first form...

Jim123

daveVk

Jim123

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week