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>

Click here to see live demo

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>

Click here to see live demo

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>

Click here to see live demo

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>

Click here to see live demo