Hi there here is a sample program that will ask the user to give three numbers and then our program will compute the total sum of the three numbers using PHP and AJAX. The code is very simple and easy to understand.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
index.php
<html>
<head>
<title> Addition of Three Number 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> Addition of Three Numbers Using PHP and AJAX</h3>
<script>
function clear_all()
{
document.getElementById("num1").value= "";
document.getElementById("num2").value= "";
document.getElementById("num3").value= "";
}
</script>
<form action="javascript:add(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>Third Value</td>
<td> <input id="num3" 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 add(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;
var str3="&num3=" +document.getElementById("num3").value;
XMLHttpRequestObject.onreadystatechange = show;
XMLHttpRequestObject.open('POST', 'value.php', true);
XMLHttpRequestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttpRequestObject.send(str1+str2+str3);
function show()
{
if (XMLHttpRequestObject.readyState == 4)
{
if (XMLHttpRequestObject.status == 200)
{
result = XMLHttpRequestObject.responseText;
document.getElementById('txt').innerHTML = result;
}
}
}
}
value.php
<?php
error_reporting(0);
$num1=$_POST['num1'];
$num2=$_POST['num2'];
$num3=$_POST['num3'];
$sum=$num1+$num2+$num3;
echo "The total sum of $num1, $num2 and $num3 is $sum.";
?>
