Access HTML Form and It’s element using JavaScript
JavaScript also provides the easiest way to get the access of the any HTML form element which exist in the currently open HTML document by the form’s name or it’s index.
A form is always available by it’s name and It’s index.
Syntax:
var form = document.forms[index]; //OR var form = document.forms["form-name"]; //OR var form = document.forms.form-name;
Above is the three syntax which we can use to access the any HTML form.
Access the Form’s element
Once we get the HTML form element, after that we can access the any element of form.
We can access the form’s elements likes, text, radio, checkbox, select elements by it’s name or it’s index.
For accessing the form’s element we have to use the elements property of the form.
Syntax:
var form = document.forms.form-name; var element = form.elements[index]; //or var element = form.elements["element-name"]; //or var element = form.elements.element-name;
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form name="frmRegist">
<input type="text" name="firstname" value="James"/>
<input type="text" name="lastname" value="Bond"/>
</form>
<script type="text/javascript">
// Access the form named frmRegist.
var form = document.forms.frmRegist;
// Get the value of the firstname and lastname text element
// using the elements property of the form element
var fName = form.elements.firstname.value;
var lName = form.elements.lastname.value;
var name = fName + " " + lName;
alert(name);
</script>
</body>
</html>
In the form there may be the multiple element is exist with the same name. So it will be return the array of the that element.
Multiple element with the same name
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form name="frmRegist">
Gender : <input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female
</form>
<script type="text/javascript">
var form = document.forms.frmRegist;
var elements = form.elements.gender;
alert(elements[0].value);
alert(elements[1].value);
</script>
</body>
</html>
Select element tag
Select element tag provides the access of it’s options.
The select element tag comes with the options property to access the it’s options tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form name="frmRegist">
Gender:
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</form>
<script type="text/javascript">
var form = document.forms.frmRegist;
var elements = form.elements.gender;
alert(elements.options[0].value);
alert(elements.options[1].value);
</script>
</body>
</html>
Select element tag also come with the selectedIndex property which keeps the index of the selected option.
So we can use the value of the selectedIndex property to get the selected option from the list of the options.
It is only useful when the select is not multiple.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form name="frmRegist">
Gender:
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</form>
<script type="text/javascript">
var form = document.forms.frmRegist;
var elements = form.elements.gender;
alert(elements.options[elements.selectedIndex].value);
</script>
</body>
</html>