SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Document Object

Form elements by getElementById

We 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.

Related Tutorial
getElementsByTagName
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.

Demo of checkbox getElementById

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.

Demo of Form with ID

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>

Be the first to post comment on this article :


Google+

Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Document Object in JavaScript
Cookies
Last Modified Date of the file



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer