Forms
Passing Form Data and Elements to Functions
Javascript features a keyword this that always refers to object contains the script in which the keyword is used.
<input type=”text” name=”textfield” onchange=”myfunction(this)” /> the keyword this pass a reference of the text object to the function.
<input type=”button” value=”click” onclick=”myfunction(this.form)” /> a reference to the entire form, rather than just the object calling the function.
Code:
<html>
<head>
<title>Beatle picker</title>
<script type="text/javascript">
//---------------------------------------------------------------------
function myfunction_A(form)
{
for(var i=0; i<form.Beatles.length; i++)
{
if(form.Beatles[i].checked)
break;
}
var beatle = form.Beatles[i].value;
var song = form.song.value;
alert(song + " " + beatle);
}
//--------------------------------------------------------------------
function myfunction_B(entry)
{
var song = entry.value;
alert(song);
}
//--------------------------------------------------------------------
</script>
</head>
<body>
<p>
<form onsubmit="return false">
<input type="radio" name="Beatles" value="John Lennon" checked />John
<input type="radio" name="Beatles" value="Paul McCartney" />Paul
<input type="radio" name="Beatles" value="George Harrison" />George
<input type="radio" name="Beatles" value="Ringo Star" />Ringo
</p>
<p> <input type="text" name="song" value="Eleanor Rigby" onchange="myfunction_B(this)"/> <input type="submit" name="process" value="Process" onclick="myfunction_A(this.form)" /> </p> </form> </body> </html>
Submitting and Prevalidating Forms
Before a form is submitted we perform a validation of data in the form. We can do this in a function invoked by the form’s onsubmit event handler.
Code:
<html>
<head>
<title>Prevalidating Data</title>
<script type="text/javascript">
//----------------------------------------------------
function check(form)
{
for(var i=0; i<form.elements.length; i++)
{
if(form.elements[i].value == "")
{
alert("Field:" + form.elements[i].name + " empty");
return false;
}
}
return true;
}
//--------------------------------------------------
</script>
</head>
<body>
<form onsubmit="return check(this)">
First name: <input type="text" name="firstName" /><br />
Last name: <input type="text" name="lastName" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The Select Object
The most complex form control to script is the select element object, this object contains an array of options objects.Some properties belong to the entire select object; others belong to individual options inside the select object.The most important property of the select object is the selected property document.myform.selectName.selectedIndex.
Other properties of an option object are text and value:
document.myform.selectName.options[i].text
document.myform.selectName.options[i].value
Code:
<html> <head> <title>Select Object</title> <script type="text/javascript"> //---------------------------------------------------- function myfunction() { var selectList = document.forms[0].myselect; alert("Selected text:" + selectList.options[selectList.selectedIndex].text + "\n" + "Selected value:" + selectList.options[selectList.selectedIndex].value); } //--------------------------------------------------- </script> </head> <body> <form> <select name="myselect" onchange="myfunction();"> <option value="1">Home</option> <option value="2">Browse</option> <option value="3">Search</option> </select> </form> </body> </html>
Radio Object
The example demonstrates how to look throught a group of buttons to find out which one is checked and how to use the value attribute.
Note : Members of a group of radio objects must have the same name. Multiple groups can exists within a form but each member of the same group must share the same name.
Code:
<html>
<head>
<title>
Radio Button
</title>
<script type=”text/javascript”>
function myfunction()
{
var myform = document.forms[0];
for(var i=0; i<myform.countries.length; i++)
{
if(myform.countries[i].checked)
break;
}
alert(myform.countries[i].value);
}
</script>
</head>
<body>
<form>
<input type=”radio” name=”countries” value=”Italy” checked />
<input type=”radio” name=”countries” value=”France” />
<input type=”radio” name=”countries” value=”England” />
<input type=”radio” name=”countries” value=”Spain” />
<input type=”button” value=”Click” onClick=”myfunction();” />
</form>
</body>
</html>
Checkebox - checked property
A checkbox is a simple element of the form object.
The key property of a checkbox object is wether or not the box is checked.
The checked property is a boolean value: true is checked , false is not.
Code:
<html>
<head>
<title>
Checkbox
</title>
<script type=”text/javascript”>
function myfunction()
{
if(document.myform.mycheckbox.checked)
{
alert(”The box is checked”);
}
else
{
alert(”The box is not checked”);
}
}
</script>
</head>
<body>
<form name=”myform” onSubmit=”return false”>
<input type=”checkbox” name=”mycheckbox” onClick=”myfunction();” />
</form>
</body>
</html>
Getting and setting a text value property
To demonstrate how a text field’s property can be read and change the script below provides a simple html page with a single form.
In this example we use the “toUpperCase()” function which converts the value to uppercase.
code:
<html>
<head>
<title>
Read and change the text value property
</title>
<script text=”text/javascript”>
function myfunction()
{
var text_field = document.forms[0].myfield;
var make_upper_case = text_field.value.toUpperCase();
text_field.value = make_upper_case;
}
</script>
</head>
<body>
<form onSubmit=”return false”>
<input type=”text” name=”myfield” onChange=”myfunction();”/>
</form>
</body>
</html>
