Access Form objects in case of multiple forms

Date:

Share post:

How to access form objects in case of multiple forms, using JavaScript?

Assume, we have a form with the id “myform”, then the form can be accessed by:

var oForm = document.getElementById('myform');

This method can only be used only when the <form> tag has an id attribute.

Another way to do it without attribute set to form tag is, by using keyword. Get a reference to the form object, through the this.form property (even if there are multiple forms on the page).

Another way is to use the document object’s collection. The collection is a Javascript array that holds references to all the forms on a web page. Each form reference can be accessed either by its index in this array or by its name attribute.

Let us look at each of these methods of accessing multiple forms in detail.

How to access multiple Forms through Javascript using this. for a property?

Pass this.form to the onClick event handler of a form button.

Example,

<form name ="myform"  action="#">
Name: <input type="text" name="myname"  size="50">
Email: </label><input type="text" name="email"  size="50">
Phone: <input type="text" name="phone"  size="50">
<input type="button" name="go" value="Go"  onclick="showElements(this.form);">
</form>

Here, this refers to the button object, and references the form object. This form object can be used in the function to access the form and all its elements.

How to access multiple Forms using the document object’s forms collection

The document object of a page has an array that holds references to all the form objects on that page. We can get references to individual forms by using the index of names. The index begins at 0.

For eg., if we have two forms with names as “first form” and “second form” respectively, we can access the form named “first form” in the following two ways:

var oForm = document.forms[0];
//OR
var oForm =  document.forms["firstform"];

We could also use the shorthand notation: document.forename:

var  oForm = document.firstform;

Note: The shorthand notation is deprecated, and is either not supported in recent versions of Firefox or is buggy and unreliable.

It is also preferable to use the form’s name attribute instead of the index, as it is less likely for the name of the forms on the page to change, and more likely for their sequential position in the code to change.

Every form field of a form is contained in the form’s elements the collection which is a javascript array similar to the document object’s forms collection.

To access the text input field named “tags_list” of the form named “submit_bookmark”, we can use one of the following methods:

var  oForm = document.forms["submit_bookmark"];
var oTagsList = oForm.elements[2];
//OR
var oTagsList = oForm.elements["tags_list"]; 

//Get the value of the input element,
var tags  = oTagsList.value;

As a further example, let us say that we had to copy the value of an element in one form into an element in another form.

We could implement this by passing the names of the two forms as well as the names of the source and target elements to a javascript function:

<a href="#" onClick=" javascript:  copyFormElementToElementOfDifferentForm('submit_article', 'submit_bookmark',  'site_cat', 'tags_list');"> Copy site_cat element value of the first form to  the input field named "tags_list" of the second form</a>
<script>
var oForm1 =  document.forms[oForm1Name];
var oForm2 =  document.forms[oForm2Name];
var oForm1Element =  oForm1[oForm1ElementName];
var oForm2Element =  oForm2[oForm2ElementName];
if(oForm2Element.value == '')  {
oForm2Element.value += oForm1Element.value;
} else  {
oForm2Element.value += ', ' +  oForm1Element.value;
}
</script>

Here, we first acquire references to form objects using their names. We then acquire references to the source and target elements. Then, copy the value of the source element to the target element.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related articles

What is the Nanocore Trojan virus?

The unique methodology makes the Nanocore virus a dangerous threat that uses cunning ways and disguises itself to...

What Is Discord? a Guide to the Popular Group-Chatting App

Becoming the quintessential communication app in the gamer world is difficult, but Discord has given us a master class on...

Why you should start your own Uber clone app development business?

Uber Clone App is a mobile app that helps companies to build their own Uber clone app. It...

Troubleshooting tips to fix a YouTube filter issue

Have you ever noticed that when you are playing a YouTube video on your computer and then try...