 <p>Its just a mathematical calculation which can done using javascript alone. There is no need of AJAX as I guess. You get the input and calculate and display it with drawing even using canvas.</p> <p>What you need is formulas as in the link you need <code>A = π * (r * r)</code> for circle</p> <p>and for square <code>A = a * a</code> where a is the length of a side.</p> <p>Using keyup call backs you can easily make it without using a button. See a example <a href="http://jsfiddle.net/U9reT/" rel="nofollow">here</a></p> <p>HTML</p> <pre><code>&lt;input type="text" id="radius" /&gt; &lt;div id="res"&gt; Area is &lt;span&gt; 0 &lt;/span&gt; &lt;/div&gt; </code></pre> <p>jquery</p> <pre><code>$(document).ready(function() { $("#radius").keyup(function(e) { e.preventDefault(); var r = parseInt($(this).val(),10); var a = (r*r) * 3.142; $("#res span").html(a); }); }); </code></pre> <p>javascript</p> <pre><code>var rad = document.getElementById("radius"); rad.addEventListener("keyup", function() { var r = parseInt(this.value, 10); var a = (r*r) * 3.142; alert(a);// display it in a element instead of alert }, false); </code></pre>