Home Ajax Ajax Multiply Two Values

Ajax Multiply Two Values
Posted on: November 23, 2006 at 12:00 AM

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

Related Tags for Ajax Multiply Two Values:
php, c, string, ide, url, server, orm, form, post, io, method, user, request, ip, page, numbers, value, number, this, opera, id, servers, for, call, program, send, values, ram, serverside, pos, e, multi, rsi, multiplication, ls, calling, li, use, ul, pe, enter, in, rm, cal, as, m, nt, tr, sid, side, os, ca, os, operation, calls, es, end, all, age, me, hp, pro, cat, s, tip, at, ply, ratio, quest, is, ll, multiplying, str, rv, va, s, s, ri, ring, th, st, ati, alu, ends, ends, ipl, ica, ica, pl, pr, nd, on, ogr, o

«Previous Index Next»