Simple Calculator in PHP

Today i will show you how to create a simple calculator in php that will evaluate the input string given by the user… Lets start…

Calculator in AJAX and PHP

Calculator screenshot

         Live Demo

The HTML markup for textboxs, operator selection and submit button


<div class="container">
 <div class="panel panel-primary">
 <div class="panel-heading">
 <h4>Basic Calculator in PHP and AJAX</h4>
 </div>
 <div class="panel-body">
 First Input:<input type="text" class="form-control" name="input1" id="input1"/><br/>
 Second Input:<input type="text" class="form-control" name="input2" id="input2"/><br/>
 Operator:<select id="operator">
 <option>--Select An Operator--</option>
 <option>+</option><br/>
 <option>-</option>
 <option>*</option>
 <option>/</option>
 <option>%</option>
 <option>++</option>
 <option>--</option>
 </select><br/><br/>
 <input type="submit" value="Calculate" class="form-control btn btn-primary" onClick="javascript:ajax_post();"/>
 <div id="status" ></div>
 </div>
 </div>
 </div>

Notice: The best way of doing a simple calculations is using switch case and compare operator with condition and do the task…as i did here…

The Javascript Function that Performs ajax calls is ajax_post().

The code of function is here…


<script type="text/javascript">
function ajaxObj( meth , url )
{
var x = new XMLHttpRequest();
x.open(meth , url , true);
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x)
{
if(x.readyState == 4 && x.status == 200)
{
return true;
}
}
function ajax_post(){
var ajax = ajaxObj("POST","calc.php");
var inp1 = document.getElementById("input1").value;
var inp2 = document.getElementById("input2").value;
var operator = document.getElementById("operator").value;
var datastring = "name="+inp1+"&id="+inp2+"&op="+operator;
ajax.onreadystatechange = function()
{
if(ajaxReturn(ajax) == true)
{
document.getElementById("status").innerHTML ="Value = " + ajax.responseText;
}
}
ajax.send(datastring);
document.getElementById("status").innerHTML = "Processing...";
}
</script>

Explanation:


function ajaxObj( meth , url )
{
var x = new XMLHttpRequest();
x.open(meth , url , true);
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}

This function ajaxObj makes ajax calls that opens and passes the parameters to the url(File Name).


function ajaxReturn(x)
{
if(x.readyState == 4 && x.status == 200)
{
return true;
}
}

This function ajaxReturn returns the readystate of the ajax object if everything is OK.


function ajax_post(){
var ajax = ajaxObj("POST","calc.php");
var inp1 = document.getElementById("input1").value;
var inp2 = document.getElementById("input2").value;
var operator = document.getElementById("operator").value;
var datastring = "name="+inp1+"&id="+inp2+"&op="+operator;
ajax.onreadystatechange = function()
{
if(ajaxReturn(ajax) == true)
{
document.getElementById("status").innerHTML ="Value = " + ajax.responseText;
}
}
ajax.send(datastring);
document.getElementById("status").innerHTML = "Processing...";
}

ajax_post() is used to process our input strings that are given by the user…

we handle creation of ajax object(XMLHttpRequest object) and compare the readystate of every event that is invoked by the user…

Next we send the parameters(that are collected using javascript document object ) to the

ajax.send()

method that  are passed to the calc.php file.

Full Code….

For Calculating the output….


<?php
 $i1 = $_POST['name'];
 $i2 = $_POST['id'];
 $op = $_POST['op'];
 switch($op)
 {
 case "+":
 $output = $i1 + $i2;
 echo $output;
 break;
 case "-":
 $output = $i1 - $i2;
 echo $output;
 break;
 case '*':
 $output = $i1 * $i2;
 echo $output;
 break;
 case '/':
 $output = $i1 / $i2;
 echo $output;
 break;
 case '%':
 $output = $i1 % $i2;
 echo $output;
 break;
 case '++':
 echo $i1 ++;
 break;
 case '--':
 echo --$i1;
 break;
 default:
 echo $output = "Not Found...Please Enter only Integers or Decimals...";
 }
?>

For The Mark-up….


<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Basic Calculator in PHP and AJAX</h4>
</div>
<div class="panel-body">
First Input:<input type="text" class="form-control" name="input1" id="input1"/><br/>
Second Input:<input type="text" class="form-control" name="input2" id="input2"/><br/>
Operator:<select id="operator">
<option>--Select An Operator--</option>
<option>+</option><br/>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
<option>++</option>
<option>--</option>
</select><br/><br/>
<input type="submit" value="Calculate" class="form-control btn btn-primary" onClick="javascript:ajax_post();"/>
<div id="status" ></div>
</div>
</div>
</div>

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s