Home Ajax Ajax Multiply Two Values

Related Tutorials


 
 

Share on Google+Share on Google+

Ajax Multiply Two Values

Advertisement
Ajax is a web development technique where you can send the request to server without refreshing the page. In this section, you will learn how to multiply two values and display the result on the page.

Ajax Multiplication Program

     

Ajax is a web development technique where you can send the request to server without refreshing the page. In this section, you will learn how to multiply two values and display the result on the page. This program calls the method 'callmultiply()' for the multiplying  the values entered by user. The multiplication operation is performed in the 'multiply.php' page at serverside. The 'callmultiply()' sends the numbers as url string by calling the 'postRequest()' method. The 'postRequest()' method generates Ajax call to serverside script 'multiply.php'. And finally 'updatepage()' method updates the multiplication result on the html page.

Example of Ajax multiplication program:

<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 b = parseInt(document.f1.b.value);
  var url = "multiply.php?a=" + a + "&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="b" id="b" value="">
   <input name="result" type="text" id="result">
   <input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
  </form>
   </body>
</html>

Here is the code of the "multiply.php" page:

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

Try the example online

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 23, 2006

Related Tutorials

Discuss: Ajax Multiply Two Values   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
Jim
February 18, 2012
Two forms on one page

I've been trying to get two forms working on one page, but when I press the Multiply button of the second form, it updates the result of the first form. Any ideas on how to solve this? Other than that, great script! Very understandable for a beginner.
Muhammad Zaid
April 13, 2014
Appriciate

hello , I am very very appriciated your script. i want to ask you that if i don't press button when result show on next field. for example i write two values in field and then press TAB then result show in next field..... Please solve this problem.. mail me on my email address
DMCA.com