There are two other cross-browser ways of accessing form elements:
document.getElementsByTagName anddocument.getElementsByName.USING THE DOCUMENT.GETELEMENTSBYTAGNAME METHOD
This method takes in as argument the name of a tag (element) and returns an array of all matching tags (elements) found in the document.
In our form example, if we had to get a reference to all the <input> elements, we could use the following code:
var inputs = document.getElementsByTagName('input');
The variable inputs is a reference to an array of all <input> elements including: <input type=”button”>
Example Demo2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Demo: Using getElementByTagNameto get the elements in a form</title> <script script type="text/javascript" src="demo2.js"></script> </head> <body> <form name ="subscribe" id="subscribe_frm" action="#"> <div> <p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p> <p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p> <p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format"> <option value="TEXT">Plain Text</option> <option value="HTML">HTML</option> </select></p> <p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p> </div> </form>
Example demo2.js
What if we only wanted to access <input> elements with the type attribute as text? We could do it in the following way:function processFormData() { var inputs = document.getElementsByTagName('input'); var message = 'The form has the following input elements: \n\n'; for (var i = 0; i < inputs.length; i++) { message += inputs[i].tagName + " element with 'type' attribute = '" + inputs[i].getAttribute('type') + "' and 'name' attribute = '" + inputs[i].getAttribute('name') + "'\n"; } alert(message); }This time, the elements retrieved do not include the element: <input type=”button”>.Example Demo3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Demo: Using getElementsByTagName to get the elements in a form</title> <script script type="text/javascript" src="demo3.js"></script> </head> <body> <form name ="subscribe" id="subscribe_frm" action="#"> <div> <p><label for="name">Your Name: </label><input type="text" name="name" id="txt_name"></p> <p><label for="email">Your Email: </label><input type="text" name="email" id="txt_email"></p> <p><label for="mail_format">Mail Format: <select name="mail_format" id="slt_mail_format"> <option value="TEXT">Plain Text</option> <option value="HTML">HTML</option> </select></p> <p><input type="button" name="submit" value="submit" onclick="processFormData();" ></p> </div> </form>Example Demo3.js
function processFormData() { var inputs = document.getElementsByTagName('input'); var message = "The form has the following input elements with the 'type' attribute = 'text': \n\n"; for (var i=0; i < inputs.length; i++) { if (inputs[i].getAttribute('type') == 'text') { message += inputs[i].tagName + " element with the 'name' attribute = '" + inputs[i].getAttribute('name') + "'\n"; } } alert(message); }
0 comments:
Post a Comment