Hi there in this article I would like to share with you how to you AJAX and PHP together to accept two numbers from the user and then our program will compute the product of the two numbers. The code is written in PHP, JavaScript and AJAX. It is very simple to understand and follow. Thank you.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
index.php
<html>
<head>
<title> Product of Two Numbers Using PHP and AJAX </title>
</head>
<script language="javascript" src="ajax.js">
</script>
<body>
<style>
body {
background-color:lightgreen;
font-family:arial;
font:12px;
}
</style>
<br>
<h3> Product of Two Numbers Using PHP and AJAX</h3>
<script>
function clear_all()
{
document.getElementById("num1").value= "";
document.getElementById("num2").value= "";
}
</script>
<form action="javascript:product(document.getElementById('frm'));" name="frm" id="frm">
<table>
<tr>
<td>First Value</td>
<td> <input id="num1" type="text" autofocus required/></td>
</tr>
<tr>
<td>Second Value</td>
<td> <input id="num2" type="text" required/></td>
</tr>
<tr>
<td colspan="2">
<br>
<input type="submit" name="button" value="Solve">
<input type="submit" name="button" value="Clear" onClick="clear_all();">
</td>
</tr>
</table>
</form>
<div name="txt" id="txt"></div>
</body>
</html>
ajax.js
function product(obj)
{
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
var str1= "num1=" + document.getElementById("num1").value;
var str2="&num2=" +document.getElementById("num2").value;
XMLHttpRequestObject.onreadystatechange = show;
XMLHttpRequestObject.open('POST', 'value.php', true);
XMLHttpRequestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttpRequestObject.send(str1+str2);
function show()
{
if (XMLHttpRequestObject.readyState == 4)
{
if (XMLHttpRequestObject.status == 200)
{
result = XMLHttpRequestObject.responseText;
document.getElementById('txt').innerHTML = result;
}
}
}
}
value.php
<?php
$num1=$_POST['num1'];
$num2=$_POST['num2'];
$num3=$num1*$num2;
echo "The product of $num1 and $num2 is $num3.";
?>
