Ajax Multiply Two Values

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 Multiply Two Values

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