How to get or scan the element of different input tag name using pure/native Javascript? There's have 5 input for first, middle and last name, address and birthdate. But I just want to get only the specific input tags and display it with alert or msgbox. See below...

Here's the html tag:

<form name="test">
<tr>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_01_FIRSTNAME" size="15" maxlength="60"></td>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_02_MIDDLENAME" size="15" maxlength="60"></td>
        <td align="left" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_03_LASTNAME" size="15" maxlength="60"></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_07_ADDRESS1" size="50" value="" maxlength="200"></td>
        <td align="left" bgcolor="#e9e9e9"><input name="FIELD_01_04_BDAY" type="text" size="15" maxlength="15"></td>
      </tr>
       </form>

How to get or scan the element of different input tag name using pure/native Javascript? There's have 5 input for first, middle and last name, address and birthdate. But I just want to get only the specific input tags and display it with alert or msgbox. See below...

Here's the html tag:

<form name="test">
<tr>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_01_FIRSTNAME" size="15" maxlength="60"></td>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_02_MIDDLENAME" size="15" maxlength="60"></td>
        <td align="left" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_03_LASTNAME" size="15" maxlength="60"></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_07_ADDRESS1" size="50" value="" maxlength="200"></td>
        <td align="left" bgcolor="#e9e9e9"><input name="FIELD_01_04_BDAY" type="text" size="15" maxlength="15"></td>
      </tr>
       </form>

• javascript
• html

• document.getElementsByTagName – Ram Commented Sep 4, 2014 at 4:06

7 Answers 7

There's a couple ways:

var list = document.querySelector("input");
var list = document.querySelectorAll("input")[0];
var list = document.getElementsByTagName("input")[0];

• https://developer.mozilla/en-US/docs/Web/API/document.querySelector
• https://developer.mozilla/en-US/docs/Web/API/Element.getElementsByTagName

addendum...

querySelector is more flexible because it can take any valid css selector (much like jQuery). If you need to get input elements with a particular name, this is really convenient:

var firstName = document.querySelector("input[name='firstName']");

var namedInputs = document.querySelectorAll("input[name]");

2nd edit...

If you don't want to type too much, you can create an alias for querySelector:

window.get = document.querySelector.bind(document);

var firstname = get("[name='FIELD_01_01_FIRSTNAME']").value;
var lastname = get("[name='FIELD_01_02_MIDDLENAME']").value;
//etc...

3rd edit...

If you have your elements within a <form>, you can just use the name of the form + the name of the input for dom navigation:

HTML
<form name='test">
    <input type="text" name="firstName" value="James" />
</form>


//javascript
alert( test.firstName.value );

So, in this way, you could also access your inputs like so:

var fname = test.FIELD_01_01_FIRSTNAME.value;
var lname = test.FIELD_01_02_MIDDLENAME.value;
//etc....

If you would like to see a demonstration of this method, try this fiddle: http://jsfiddle/axj6vrwb/1/

The thing to watch out for here is that you do not have a local variable named test. If you want to explicitly refer to the global test, you can use window.test instead.

Lots of answers looking at tags, but here's another approach. If the elements are in a form, they will also be available as named properties of the form and in its elements collection, e.g.

<form id="f0">
  <table>
    <tr>
      <td><input type="text" name="FIELD_01_01_FIRSTNAME"></td>
      <td><input type="text" name="FIELD_01_02_MIDDLENAME"></td>
      <td><input type="text" name="FIELD_01_03_LASTNAME"></td>
    </tr>
    <tr>
      <td><input type="text" name="FIELD_01_07_ADDRESS1"></td>
      <td><input name="FIELD_01_04_BDAY" type="text"></td>
    </tr>
  </table>
</form>

Then you can get all the controls in the form by first getting the form (each of the following is equivalent):

var form = document.getElementById('f0');  // or
var form = document.forms[0];              // or
var form = document.forms.f0;

then get controls by name:

var firstName = form.FIELD_01_01_FIRSTNAME.value;    // or
var firstName = form['FIELD_01_01_FIRSTNAME'].value;

Note that if two or more controls have the same name, the above will return an HTMLCollection of the controls.

And using elements:

var allControls = form.elements;

This question really could use so re-wording/more explanation as to what is trying to be done.

document.querySelectorAll('input[name]');

That will select all input elements with the name attribute, which could then be iterated through.

or

 document.getElementsByTagName('input')[0].getAttribute('name');

would give you the tag name of a particular input element.

But as stated, not understanding the question, I'm not sure that helps at all.

Put CSS selectors of all your inputs in a ma-separated string and run a querySelectorAll:

document.querySelectorAll('[name="FIELD_01_01_FIRSTNAME"], [name="FIELD_01_02_MIDDLENAME"]');

etc.

var elements = document.getElementsByTagName(name);

Returns an HTMLCollection of elements with the given tag name. The plete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.

For more info please visit: document.getElementsByTagName (developer.mozilla)

var elements = document.getElementsByTagName(TagName);

document.getElementsByTagName('YOUR_NAME_HERE')[0]

should be able to get the element for you.