|
|
Form elements by getElementByIdWe can access the form elements in a page by using document property but the better way is to identify by using getElementById property. We have to assign one ID to each element or the form we use. We can link up the elements by using this ID to handle any event or to assign any property.
We will learn how we can manage form components by using this ID tag. This way we need not keep any event handler like onfocus, onchange etc within the tag. A simple form can be written using these tags and all event handlers we can keep inside a function.
checkbox getElementById
While using a checkbox we can access the status of the checkbox or value of the checkbox by using getElementById. Here is some sample code.
<html><head>
<title>Demo of checkbox getElementById</title>
<script language='JavaScript' type='text/JavaScript'>
<!--
function validate() {
if(document.getElementById('c1').checked) // True if checked
{
alert(document.getElementById('c1').value); // display the value of checkbox in alert window
alert(document.getElementById('c1').name); // display the name of checkbox in alert window
return true;
}
else {
return false;
}
}
//-->
</script>
</head>
<body>
<form name='form1' action='' method='post' onSubmit='return validate();'>
<input type=checkbox name=agree id='c1' value='yes-no'>
<input type=button onClick='return validate();' value=submit>
</form>
</body></html>
This type of forms are frequently used in various applications so we will try to keep one as reference by using all type of elements like textbox, checkbox, select list, radio button etc and learn how to handle them. To make our learning simple we will not keep the validation part here and those can be added as per requirements.
Let us display the form first and you can test this to see the messages it displays. We have written one alerts which will display the form element used and the text you typed or option you have selected. All the alerts are triggers by onchange event. Here is the form.
The code to display the form is here. Note that there is no event handler within the form. Enter some data in this and see the alert box comes out.
<form method=" post" action="">
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="t1" name="FirstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="t2" name="LastName"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" id="r1" name="gender" value=Male>Male <input type="radio" id="r2" name="gender" value=Female>Female</td>
</tr>
<tr>
<td>Games Played</td>
<td><select name="games" id="s1" ><option value=Football>FootBall</option>
<option value=Tenis>Tenis</option>
<option value=cricket>Cricket</option>
</select>
</td>
</tr>
<tr><td>Terms & Condition</td><td><input type=checkbox name=agree value=yes id=c1></td></tr>
</table>
<input type="submit" id="btnSignUp" value="Sign Up!!" />
</form>
The code for displaying the above form is here. Note that there is no event handler.
We have used window.onload function to initialize all form elements while the page loads. Then used the onchange event handler to trigger another function formValidation(). So Inside this function formValidation we are first reading the keyinput and which form element is used in various components. The two lines below first used inside the function formValidation collect the information about the element used.
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
Then the object properties of the tag is used to get details on tag id, tag value and tag name. All these information are kept in a variable msg and displayed through an alert window.
var msg="id = "+ txtField.id + " name =" +txtField.name + " value = "+txtField.value;
alert(msg);
The full code as explained above is displayed here. Note how differently the checkbox is handled.
<html>
<head>
<script type="text/javascript" >
function formValidation(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
if(txtField.id=="c1"){
var msg="id = "+ txtField.id + " name =" +txtField.name + " Checked = "+txtField.checked;
}else{
var msg="id = "+ txtField.id + " name =" +txtField.name + " value = "+txtField.value;
}
alert(msg);
}
window.onload = function () {
var btnSignUp = document.getElementById("btnSignUp");
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");
var s1=document.getElementById("s1");
var c1=document.getElementById("c1");
t1.onchange = formValidation;
t2.onchange = formValidation;
r1.onchange = formValidation;
r2.onchange = formValidation;
s1.onchange = formValidation;
c1.onchange = formValidation;
}
</script>
</head>
<body >
<form method=" post" action="form-success.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="t1" name="FirstName"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="t2" name="LastName"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" id="r1" name="gender" value=Male>Male <input type="radio" id="r2" name="gender" value=Female>Female</td>
</tr>
<tr>
<td>Games Played</td>
<td><select name="games" id="s1" ><option value=Football>FootBall</option>
<option value=Tenis>Tenis</option>
<option value=cricket>Cricket</option>
</select>
</td>
</tr>
<tr><td>Terms & Condition</td><td><input type=checkbox name=agree value=yes id=c1></td></tr>
</table>
<input type="submit" id="btnSignUp" value="Sign Up!!" />
</form>
</body>
</html>
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
| | |
|
|
|
|
|
