How to Converse Area in Javascript?

Area Conversion Calculator:(Using Javascript)

This Code is Valuable for Real estate,Builders,To cal calculate the value of a area.

Code for Area Conversion Calculator:

Step-1

1.We need some Static Html to Display the Calculator:


Area Conversion Calculator - from Propmart
<script src="area-conversion-calculator.js" type="text/javascript"><!--mce:0--></script>
<div>
<table border="0" cellspacing="0" cellpadding="1" width="22%" bgcolor="#003399">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="50%" bgcolor="#ffffff">
<tbody>
<tr>
<td bgcolor="#000000"><img src="/propmart/images/trans.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td height="25" valign="middle" bgcolor="#0066cc"><span style="color: #ffffff; font-family: verdana; font-size: x-small;">
</span></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="50%" bgcolor="#ffffff">
<tbody>
<tr>
Area Conversion Calculator</tr>
<tr>
<td width="50%" align="center">
<table border="0" cellspacing="0" cellpadding="4" width="50%" align="center">
<tbody>
<tr>
<td>This calculator helps you convert a unit of measurement into any other unit.
Just enter any one value in the box given below and click on the 'Calculate' button to
get the equivalent values in all the other measurement units!
<table border="0" cellspacing="0" cellpadding="2" width="50%">
<form>
<tbody>
<tr>
<td>Aankadam</td>
<td><input name="area0" size="12" type="text" /></td>
</tr>
<tr>
<td>Ares</td>
<td><input name="area1" size="12" type="text" /></td>
</tr>
<tr>
<td>Biswa</td>
<td><input name="area2" size="12" type="text" /></td>
</tr>
<tr>
<td>Chataks</td>
<td><input name="area3" size="12" type="text" /></td>
</tr>
<tr>
<td>Guntha</td>
<td><input name="area4" size="12" type="text" /></td>
</tr>
<tr>
<td>Kanal</td>
<td><input name="area5" size="12" type="text" /></td>
</tr>
<tr>
<td>Rood</td>
<td><input name="area6" size="12" type="text" /></td>
</tr>
<tr>
<td>Square Meter</td>
<td><input name="area7" size="12" type="text" /></td>
</tr>
<tr>
<td>Acres</td>
<td><input name="area8" size="12" type="text" /></td>
</tr>
<tr>
<td>Bhighas</td>
<td><input name="area9" size="12" type="text" /></td>
</tr>
<tr>
<td>Cents</td>
<td><input name="area10" size="12" type="text" /></td>
</tr>
<tr>
<td>Grounds</td>
<td><input name="area11" size="12" type="text" /></td>
</tr>
<tr>
<td>Hectares</td>
<td><input name="area12" size="12" type="text" /></td>
</tr>
<tr>
<td>Kottha</td>
<td><input name="area13" size="12" type="text" /></td>
</tr>
<tr>
<td>Square Feet</td>
<td><input name="area14" size="12" type="text" /></td>
</tr>
<tr>
<td>Square Yards</td>
<td><input name="area15" size="12" type="text" /></td>
</tr>
<tr>
<td colspan="2"><span style="color: #ff0000;"><strong>Note:</strong> Clear before each use.
</span></td>
<td colspan="2" height="35" align="right">
<a onclick="return(calculate(document.frm1))">
<img src="/propmart/images/btn/btn_calculate.gif" border="1" alt="Calculate" /></a>
<a onclick="return(clearbox(document.frm1))">
<img src="/propmart/images/btn/btn_clear.gif" border="1" alt="Clear" /></a></td>
</tr>
</tbody>
</form></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#000000"><img src="/propmart/images/trans.gif" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<code>

Note:The above code Generate the following html table

Area Conversion Calculator
This calculator helps you convert a unit of measurement into any other unit. Just enter any one value in the box given below and click on the ‘Calculate’ button to get the equivalent values in all the other measurement units!

Aankadam Acres
Ares Bhighas
Biswa Cents
Chataks Grounds
Guntha Hectares
Kanal Kottha
Rood Square Feet
Square Meter Square Yards
Note: Clear before each use. Calculate Clear

 
Step-2:Now we need the Javascript to convert our input to desire output.

Add this little Javascript to your page.

function validate(docname)
{
var i;
var getval=docname.value;
// Validate data:- parse string to check whether it contains
// characters other than numbers and one decimal
var count_deci=0;
var flag=0;
// parse through the data
for(i=0;i= "0" && getval.charAt(i)  <= "9") || (getval.charAt(i) == "."))  {    // if decimal  if(getval.charAt(i) == ".")  {  count_deci=count_deci+1;  // to check entries of the type X.  if(getval.charAt(i+1)=="")  {  alert("Wrong entry");  docname.value="";  docname.focus();  flag=1;  break;  }  }  // check if there is more than one decimal  if(count_deci>1)
 { alert("Illegal Data");
 docname.value="";
 docname.focus();
 flag=1;
 break;
 }
 }
 // executed if data contains alphabets or special chars
 else
 { alert("Invalid Entry");
 docname.value="";
 docname.focus();
 flag=1;
 break;
 }
}
}
function calculate(docname)
{
var totalrecords;
// obtain the count of records retrieved
totalrecords=16
// declare variables
var dimension_name=new Array(totalrecords);
var dimension_value=new Array(totalrecords);
var value_obtained=new Array(totalrecords);
var area;
var count=0;
var index;
// All values relative to sq. feet - constants
dimension_name[0]="Aankadam";
dimension_value[0]=0.0138908;
dimension_name[1]="Acres";
dimension_value[1]=0.00002295;
dimension_name[2]="Ares";
dimension_value[2]=0.0009293;
dimension_name[3]="Bhighas";
dimension_value[3]=0.0000573;
dimension_name[4]="Biswa";
dimension_value[4]=0.0000028;
dimension_name[5]="Cents";
dimension_value[5]=0.002296;
dimension_name[6]="Chataks";
dimension_value[6]=0.0022222;
dimension_name[7]="Grounds";
dimension_value[7]=0.0004166;
dimension_name[8]="Guntha";
dimension_value[8]=0.0009182;
dimension_name[9]="Hectares";
dimension_value[9]=0.0000092;
dimension_name[10]="Kanal";
dimension_value[10]=0.0001852;
dimension_name[11]="Kottha";
dimension_value[11]=0.0013888;
dimension_name[12]="Rood";
dimension_value[12]=0.0000918;
dimension_name[13]="Square Feet";
dimension_value[13]=1;
dimension_name[14]="Square Meter";
dimension_value[14]=0.093;
dimension_name[15]="Square Yards";
dimension_value[15]=0.1111111112;
// Get dimension values
for(i=0;i
{
 value_obtained[i]=docname[i].value;
}
// check for more than one entry :- count keeps tab of that.
// index is used to track the field in which user has entered
// data
for(i=0;i1)
{
 // display error message
 alert("Wrong number of data entries");
 // set focus to first field
 docname.area0.focus();
 // make all fields null
 for(i=0;i
 {
 docname[i].value="";
 }
}
// if there is only one entry
else
{
for(i=0;i
 {    // it is unnecessary to calculate the indexed value
 // again
 if(i==index)
 continue;
 else
 {
 value_obtained[i]=value_obtained[index]*dimension_value[i]/dimension_value[index];
}
 }
// place values back in each field
 for(i=0;i
 {
 docname[i].value=value_obtained[i];
 }
//}// end of inner else
}// end of outer else
return false;
}// end of function
function clearbox(docname)
{
var totalrecords;
// obtain the count of records retrieved
totalrecords=16
for(i=0;i
docname[i].value="";
docname.area0.focus();
return false;
}

Leave a Reply

Fill in your details below or click an icon to log in:

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