Last Updated:

JavaScript: Accessing Form Data

With JavaScript, you can upload form data to the server, clear it, and access any form element to change its values.

There are several ways to access forms by using the object model.


Forms family

When you create a form, you access it through the forms family. To do this, you must either specify the form number that corresponds to the element of the auto-generated array, or you must specify the name of the form specified by the name parameter (example 1).

Example 1. Accessing the Form

<html>
<body>


<form name=data>
...
</form>

<script language="JavaScript">

alert(document.forms.length) // Get the total number of forms on the page
alert(document.forms[0].name) // Get the name of the first form through the forms array
alert(document.forms.data.length) // Determine the number of elements in the form named data
alert(document.forms["data"].length) // Same

</script>
</body>
</html>

The numbering of array elements always starts from zero, so the first form will be document.forms[0] and the second form will be document.forms[1]. Instead of an array index, you can specify the name of the form, in this case using data— document.forms["data"]. because it is more convenient to always refer to the form by name we recommend that you always specify it


Family all

The all family is specific to Internet Explorer, but is also supported by many browsers other than Netscape version 6 and later. The form is accessed as an array element with the same name as the form name , document.all["data"] or directly - document.all.data (example 2).

Example 2. Using the all family

<html>
<body>
<form name=data>
...
</form>


<script language="JavaScript">

alert(document.all["data"].length)
alert(document.all.data.name)

</script>
</body>
</html>

Internet Explorer supports another way to access forms through the getElemetById family. An example is document.getElementById("data").length, where data is the name of the form.


Get the values of form elements

Form elements are accessed through the elements family or directly by the element name (Example 3).

Example 3. Get values

<html>
<body>
<form name=data>
<input type=text name=userName value="Enter your name">
</form>


<script language="JavaScript">

alert(document.forms.data.elements.length) // Total number of elements in the form
alert(document.forms[0].elements[0].value) // The value of the first element
alert(document.forms["data"].userName.value) // The value of the element named userName

</script>
</body>
</html>

The numbering of the array, as in the case of the forms family, is done from scratch, so the first element of the form will be called elements[0]. For a large amount of data in a form, the values of the elements are best retrieved by their name. Case sensitivity is important here, so the name of the element specified by the name parameter must be written in the same way when accessing it from JavaScript. If you specify username instead of userName in the example, the error will not occur, but we will not receive the necessary data.


Working with frames

If you use a frame structure, the access to the form data changes slightly. Access from one frame to another occurs through the frames family, it is similar in use to the forms family (example 4).

Example 4. Referencing a frame

parent.frames[0].forms.data.length // Get the number of form elements named data in the first frame
parent.frames["main"].forms.data.length // Get the number of form elements named data in frame main
parent.frames.main.forms.data.length // Same
parent.frames.main.forms.data.textfield.value // The value of the textfield field

In general, getting the value of a form element would be like this.

parent.frames.frame_name.form_name.field_name.value

In Example 5, two frames are used, and the data from the frame form named main is assigned to the text field of the frame named left.

Example 5. Use shapes in frames

index.html file


<html>

<frameset rows=* cols=30%,*>
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
</frameset>

</html>


left.html file

<html>
<body>

<formname=form1>
<input type=text name=textfield1>
</form>

</body>
</html>


main.html file

<html>
<head>
<script language="JavaScript">

function passed(f) {

parent.frames.leftFrame.form1.textfield1.value = f.textfield2.value;

}
</script>
</head>

<body>
<form name=form2 onSubmit="return peredast(this)">
<input type=text name=textfield2>
<input type=submit value="Submit">
</form>

</body>
</html>

For frame names, the case value is also crucial; when accessed from JavaScript, the frame name must be written as specified in the name parameter.


Resume

It is best to access form elements through the forms family, it is the most universal and is supported by all browsers. With a large number of different forms on the page, it is more convenient for them to set their own names and address them by their name. There is no difference in how to use a form—indirectly, as an array, or directly, as a property of a family. The above records are identical in result.

document.forms["htmlField"].length
document.forms.htmlField.length

It is also convenient to get the values of form elements by referring to them by their name, which is specified by the name parameter.

document.forms["form name"].element name.value or
document.forms.form name.element name.value

JavaScript is case sensitive, so the names in the HTML and script must be identical.

It is advisable to use the elements family when processing many data of the same type. Then you can use loops, where the number of the form element will act as the counter.