First of all Make an indexpage.php.
<html>
<head>
<title>How to add three value through Ajax</title>
<link href="<?php echo base_url(); ?>css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h2 style="text-align:center;">How to add three value through Ajax</h2>
<form action="javascript:add(document.getElementById('frm'));" name="frm" id="frm">
<div class="col-md-12">
<div class="col-md-4"></div>
<div class="col-md-4">
<table style="border:10px;">
<tr>
<td>Enter Value One</td>
<td><input id="num1" type="text"/></td>
</tr>
<tr>
<td>Enter Value Two</td>
<td><input id="num2" type="text"/></td>
</tr>
<tr>
<td>Enter Value Three</td>
<td><input id="num3" type="text"/></td>
</tr>
<tr>
<td colspan="10">
<input type="submit" name="button" value="Answer">
</td>
</tr>
</table>
</form>
<div name="txt" id="txt"></div>
</div>
<div class="col-md-4"></div>
</div>
<script type="text/javascript" language="javascript">
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', '<?php echo base_url();?>jobsite/tes5', 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;
}
}
}
}
</script>
</body>
</html>
Now Make another page named it sum.php.
<?php $num1=$_POST['num1']; $num2=$_POST['num2']; $num3=$_POST['num3']; $num4=$num1+$num2+$num3; echo $num4; ?>
0 comments:
Post a Comment