Posts
In order to access a form through Javascript, we need to obtain a reference to the form object. One obvious way to approach, which you have already seen, is to use the
getElementById method. For instance, if we had a form with the id attribute "subscribe_frm", we could access the form in this way:var oForm = document.getElementById('subscribe_frm'); However, this approach has the limitation that the
<form> tag must have an id attribute, as the getElementById method needs the id of an element in order to locate it in the DOM tree. Fortunately, Javascript provides us with alternatives that can work for forms without an id attribute present.One way to approach is to make use of the
this keyword which always points to the object that is calling a particular method. Used in conjunction with the onClick event handler of a form's submit button, we can get a reference to the form itself, through the this.form property, even if there are multiple forms on the page. We will see an example of this approach shortly. The other alternative is to use the document object's forms collection to obtain a reference to the form object. The forms collection is a Javascript array that holds references to all the forms present in a web page. We can access each form reference either by it's index in this array or by it's name attribute. Let us look at each of these methods of accessing multiple forms in details.Accessing multiple Forms through Javascript using the this.form property
Every element in a form triggers events based on user action which can be handled by an appropriate event handler. For instance, the submit button on being clicked triggers the onClick event handler. Since the
this keyword in Javascript always points to the object that calls a given method, the onClick event handler can be passed this self reference to obtain a reference to the button element object.Moreover, in Javascript, every element object of a form has a property that references the form object. So, if we were to pass
this.form to the onClick event handler of a form button, this function would get the reference to the form object. This is an easy way to access form objects, even if there are multiple forms on a web page, because the form's name or id attribute are never directly used. Let us have a look at an example.<form name ="submit_bookmark" action="#">
Page Title: <input type="text" name="page_title" size="50">
Page URL: </label><input type="text" name="page_url" size="50">
Tags (comma separated): <input type="text" name="tags_list" size="40">
<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">
</form> In the form above, the
showElements onClick event handler of the form button is being passed this.form. Here this refers to the button object, and this.form references the form object. We could now use this form object in the showElements function and access the form and all it's elements.Have a look at this demo which shows two form on a web page. You can also download the code to learn more.
Accessing multiple Forms using the document object's forms collection
The document object of a web page has a property named
forms which is a javascript array that holds referencs to all the form objects on the page. We can get a reference to individual forms by using the index of the forms or by using their names. Please note that this array's index begins at 0.For instance, if we have two forms "submit_article" and "submit_bookmark" appearing on a web page in this order, we can access the form named "submit_bookmark" in the following two ways:
var oForm = document.forms[1]; OR
var oForm = document.forms["submit_bookmark"]; We could also use the shorthand notation: document.formname:
var oForm = document.submit_bookmark; 
0 comments:
Post a Comment