find inputs in HTML using JavaScript

Question

In the below table which is generated dynamically, I want to traverse and find html controls (input,select,textarea) using JavaScript DOM. I don't want span and div values.

Can anyone give an idea on how to traverse?

 <html>
     <head>Html</head>
         <body>
            <tr>
                  <td>
                    <div id="one"></div>
                  </td>
                   <td>
                      <input type="text" name="textbox" id="txtid" value=10"/>
                   </td>
                   <td>
                      <select id="cuskstatus"  name="cuskstatus" class="selectStyleBorder">
                                <option selected value="LOCAL">Local</option>
                                <option value="GLOBAL">Global</option>
                       </select>
                  </td>
              </tr>
              <tr>
                    <td>
                        <textarea id="tareaid" name="" value="10"/>
                    </td>
                    <td>
                        <span id="span1">value</span>
                    </td>
              </tr>
           </body>
    </html>

If the items order is not important you can use document.getElementByTagName. — sitifensys
– sitifensys, Commented May 16, 2011 at 18:05

Teneff · Accepted Answer · 2011-06-08 12:43:11Z

4

I would do it like this

var desired_tag_names = new Array('select', 'input', 'textarea');

function getElements(e) {
   var elements = new Array();
   for (i=0; i<e.length; i++) {
      var el = document.getElementsByTagName(e[i]);
      for (j=0; j<el.length; j++) {
         elements.push(el[j]);
      }
   }
   return elements;
}

var all_the_desired_elements = getElements(desired_tag_names);

edited Jun 8, 2011 at 12:43

answered May 16, 2011 at 18:09

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

i dont like this Over a year ago

@teneff thanks but requirement is if we take a row we must get all html controls and then only switch over to next row...let me know if u have any doubts...

i dont like this Over a year ago

@teneff please explain these getElements(document.getElementById('row199'), desired_tag_names); i am new to js...

i dont like this Over a year ago

@teneff one more thing table is generated dynamically so i dont know the id document.getElementById('row199') as you mentioned row199

Teneff Over a year ago

the first parameter passed to the function is a refference of the element with id="row199"

BalusC · Accepted Answer · 2011-05-16 18:36:42Z

1

In plain JavaScript, just use form.elements.

Assuming that you've a <form id="formid">:

var inputs = document.getElementById("formid").elements;
// ...

Or if you want to traverse all forms of the document on a per-form basis, just use document.forms to get all forms first.

for (var i = 0; i < document.forms.length; i++) {
    var form = document.forms[i];
    var inputs = form.elements;
    // ...
}

If you're already using jQuery, or are open to, use :input selector.

var $inputs = $(':input');
// ...

edited May 16, 2011 at 18:36

answered May 16, 2011 at 18:10

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Comments

Jon Cram · Accepted Answer · 2011-05-16 18:08:27Z

0

Applying jQuery makes this problem trivial:

$('input','select','textarea')

This will return a jQuery collection of all input, select and textarea elements.

answered May 16, 2011 at 18:08

Jon Cram

17.5k24 gold badges81 silver badges111 bronze badges

6 Comments

Teneff Over a year ago

It's not a good solution to include whole library just to collect few elements on the page :)

Jon Cram Over a year ago

Good is subjective. From a pragmatic perspective of getting things done quickly with the right tools, it's a great solution.

Adrian Schmidt Over a year ago

Using jQuery for this is great if you already use jQuery in your project. Including jQuery just to do this is like hunting rabbits with nuclear weapons.

Adrian Schmidt Over a year ago

I wasn't going to down-vote this, but your comment made me do it, sorry. Suggesting that jQuery is the "right tool" to do a simple DOM-selection because the developer can't be arsed to do his job correctly is simply not ok in my book. You do realise that the end user will suffer a performance penalty for that lazy decision on every single page load, right?

jrn.ak Over a year ago

@Adrian: Not too much of a penalty, if they already have jQuery cached from the CDN. :)

|

Collectives™ on Stack Overflow

find inputs in HTML using JavaScript

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related