This method takes in as argument the name attribute value of elements to be retrieved and returns a collection of desired matching elements.
In the code snippet below, let us say we need to get a reference to the <select> element with the name attribute mail_format.
<div class="container"> <div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">select</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"mail_format"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"slt_mail_format"</code><code class="xml plain">></code></div> <div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"TEXT"</code><code class="xml plain">>Plain Text</</code><code class="xml keyword">option</code><code class="xml plain">></code></div> <div class="line number3 index2 alt2"><code class="xml plain"><</code><code class="xml keyword">option</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"HTML"</code><code class="xml plain">>HTML</</code><code class="xml keyword">option</code><code class="xml plain">></code></div> <div class="line number4 index3 alt1"><code class="xml plain"></</code><code class="xml keyword">select</code><code class="xml plain">></code></div> </div>
We could access the desired element in this way:
<div class="container"> <div class="line number1 index0 alt2"><code class="jscript keyword">var</code> <code class="jscript plain">mail_format_elements = document.getElementsByName(</code><code class="jscript string">'mail_format'</code><code class="jscript plain">);</code></div> </div>
See All Code below:demo4.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Demo: Using getElementByName to get the elements in a form</title> <script script type="text/javascript" src="demo4.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="submit1" value="Elements with name='mail_format' attribute" onclick="processFormData('mail_format');" ></p> <p><input type="button" name="submit2" value="Elements with name='email' attribute" onclick="processFormData('email');" ></p> </div> </form>And demo4.jsfunction processFormData(name_attr) { var mail_format_elements = document.getElementsByName(name_attr); var message = "The form has the following elements with the 'name' attribute = '" + name_attr + "': \n\n"; for (i=0; i<mail_format_elements.length; i++) { message += mail_format_elements[i].tagName + ' element with "id" attribute = "' + mail_format_elements[i].getAttribute("id") + '"\n'; } alert(message); }
0 comments:
Post a Comment