<span id=my_text>Hello world</span>
<script>
document.getElementById("my_text").style.color = "red";
</script>

Output

Hello world

We have to assign one ID to each element of the page or the form we use. We can link up the elements by using this ID to handle any event or to manage its property.

innerHTML

<div id=my_msg></div>
<script type="text/javascript">
document.getElementById('my_msg').innerHTML=" Welcome to plus2net";
</script>

By using above code we can display the string inside the DIV tag. Output is here

 Welcome to plus2net

value

<input type=text name=t1 id =t1 value='plus2net.com'>
<br>
<script type="text/javascript"> 
my_var=document.getElementById('t1');
document.write(my_var.value);// read the input data
</script>

We can set the default value to above input box

my_var.value='Welcome' // Assign value to input text box

select()

<input type=text name=t1 id =t1 value='plus2net.com'>
<br>
<script type="text/javascript"> 
my_var=document.getElementById('t1');
document.write(my_var.value);
my_var.select()
</script>

Above code will display the value written inside text box by using document.write() and keep the text of textbox selected.

focus()

document.getElementById('t2').focus(); // Focus to element with id t2
document.getElementById('t2').select(); // Select all text

style.color

Change the font color of text to red on click of a button.

plus2net.com

<h1 id=d_color>plus2net.com</h1>

<button  onclick="change_color('red')">Red</button>
<button  onclick="change_color('yellow')">Yellow</button>
<button  onclick="change_color('Green')">Green</button>

<script>
function change_color(my_color){
 document.getElementById('d_color').style.color=my_color
}
</script>

style.backgroundColor

plus2net.com

<h1 id=d_bgcolor style="width:250">plus2net.com</h1>

<button  onclick="change_bgcolor('red')">Red</button>
<button  onclick="change_bgcolor('yellow')">Yellow</button>
<button  onclick="change_bgcolor('Green')">Green</button>

<script>
function change_bgcolor(my_color){
 document.getElementById('d_bgcolor').style.backgroundColor=my_color
}
</script>

disabled

<div class='col-sm-2'><input type='text'  id='t1'> </div>

<button   onclick="change_status(false)">Enable</button>
<button   onclick="change_status(true)">Disable</button>

<script>
function change_status(my_status){
 document.getElementById('t1').disabled=my_status
}
</script>

style.display

plus2net.com

<h1 id=d_show>plus2net.com</h1>

<button   onclick="change_display('none')">Hide</button>
<button   onclick="change_display('inline')">Display</button>

<script>
function change_display(my_status){
 document.getElementById('d_show').style.display=my_status
}
</script>

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.

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

<p class='demo'><a href=form-id.php>Tutorial on form id</a></p>

<script language='JavaScript' type='text/JavaScript'>
<!--
function validate() {
if(document.getElementById('c1').checked)  // True if checked 
{
alert("Value : " + document.getElementById('c1').value); // display the value
alert("Name : " + document.getElementById('c1').name); // display the name
return true;
}
else{
alert("Checkbox is NOT checked ")	
return false;
}
}
//-->
</script>

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>

document Object getElementByTagName

Subscribe to our YouTube Channel here

Form elements by getElementById

innerHTML

value

select()

focus()

style.color

plus2net.com

style.backgroundColor

plus2net.com

disabled

style.display

plus2net.com

checkbox getElementById

Subscribe