///Validating Form Input I

Validating Form Input I

Validating Form Input

You have learnt that HTML forms are used to gather information from online visitors to your Web site. There are registration forms, there are subscription forms, there are survey forms, and there are navigational forms – forms galore, everywhere.

There are two types of form field processing – server-side and client-side. Processing means, doing something with the information supplied by the form-filler. Server side processing is slower, and involves geeky programming talents in PHP, Perl, C++, JAVA, ASP, CORBA, etc., etc. They are generally some cryptically elite programs residing on the server, the input of the user is sent to them for their worthy solicitude, and they react accordingly. Since every time the programs need to be summoned from the chaotic chambers of an already tormented server, things get really slow. Big fuss, and I personally don’t recommend using server-side processing for form fields unless there is an inexorable necessity.

Client-side processing is carried out using either JavaScript or VBScript, as they can be written in the HTML page itself and so, no external program file is needed.

Without further ado, suppose we have this form. Please brace yourself up, as this is going to be a long affair. I suggest first you simply copy and paste the code and view the result, so that accordingly, you can make sense of what’s going on. For the moment, this function, bmical() calculates the Body Mass Index (Health experts use it to see how healthy you are) using the following algorithm:

  1. Accept height in Feet and Inches
  2. Accept Weight in Pounds
  3. Convert height to inches (ft. x 12 + In.) and square it
  4. Multiply weight with 703
  5. Divide 4 by 3

<script language="JavaScript">

function addthem(val1, val2)
{
val1=val1*1;
val2=val2*1

return val1 + val2;

}

function bmical()
{
var AllInches=0;
var StorePounds=0;
var SquareInches=0;

SquareInches=SquareInches*1;
StorePounds=StorePounds*1;
AllInches=AllInches*1;
AllInches=addthem(calc.hfoot.value*12, calc.hinch.value);
SquareInches=AllInches*AllInches;
StorePounds=calc.weight.value*703;
calc.bmi.value=Math.round(StorePounds/SquareInches);

}

</script>

<body>
<div align="center">
<p><b>BODY MASS INDEX CALCULATOR</b>
</div>

<form name="calc">
<table width="75%" border="1" align="center" bgcolor="#c0c0c0" bordercolor="#800000">
<tr>
<td width="100%" valign="top">

<table width="90%" border="1" align="center" bgcolor="#ffffff">
<tr>
<td width="20%" align="left" valign="top">

<p><font color="#000000" size="2" face="arial"> <b>Height</b> </font>

</td>

<td width="80%" align="left" valign="top">

<input type="text" name="hfoot" size="10">
<font face="arial" size="2">Ft.</font> <input type="text" name="hinch" size="10">
<font face="arial" size="2">In.</font>

</td>

</tr>

<tr>
<td width="20%" align="left" valign="top">

<p><font color="#000000" size="2" face="arial"> <b>Weight</b> </font>

</td>

<td width="80%" align="left" valign="top">

<input type="text" name="weight" size="10"> <font face="arial" size="2">Pounds</font>

</td>

</tr>
</table>

<div align="center">
<input type="button" name="calbmi" value="Calculate BMI" onclick="bmical()">
<input type="reset" name="reset" value="Reset">
</div>

<table width="70%" align="center" border="1" bgcolor="#000000">

<tr>
<td width="30%" align="left" valign="top">

<p><font color="#ffffff" size="2" face="arial"> <b>Your BMI is</b> </font>

</td>

<td width="50%" align="center" valign="top">

<input type="text" name="bmi" size="10">

</td>

</tr>
</table>

</td>

</tr>
</table>

</form>
</body>

I again stress that don’t get overwhelmed – this is all you’ve been learning – it’s just that, it’s lots of it. In the JavaScript, I have purposely used so many variables so that you can pin point every single calculation. Tables have been used just to render a neat formatting to our form. For an example, you can see the form that is present on almost every page of this web site.

First we deal with the form. The form has five components – text boxes that let the user enter feet, inches and pounds. Then two buttons. The left hand side button calculates the BMI upon clicking, and the right hand side button restores the fields to their pristine form, that is, blank, so that you can re-start your pursuit again.

The function bmical() has been assigned to the "Submit" button’s OnClick attribute, that is, whenever somebody clicks this button, the function gets executed (oh, I don’t mean it’s brutally killed or something).

The JavaScript is easily understandable, as it is simply carrying out mathematical calculations. We have used the pre-learnt Math.round() method here.

Observe how individual form fields have been accessed. For instance, to convert feet to inches:

AllInches=AllInches*1;
AllInches=addthem(calc.hfoot.value*12, calc.hinch.value);
SquareInches=AllInches*AllInches;
StorePounds=calc.weight.value*703;
calc.bmi.value=Math.round(StorePounds/SquareInches);

AllInches is a variable that stores the height in inches. We access the Feet field by using calc.hfoot.value, we access the inches field by using calc.hinch.value. Remember when I had introduced the

tag, I had told that the name attribute is needed when we have to access the fields of the form? So what we do to get the Foot information of the form is, get the value of the field hfoot that belongs to the form named calc.

Makes sense? We’ll explore it more in the next part. Until then.

2010-05-26T10:59:11+00:00 June 1st, 2005|JavaScript|0 Comments

About the Author:

Amrit Hallan is a freelance web developer. You can checkout his website at http://www.bytesworth.com. For more such articles join BYTESWORTH REACHOUT at http://www.bytesworth.com/br/default.asp or if you have a web dev related question then post it at http://www.business180.com/index.php

Leave A Comment