accessing html table elements in javascript

Question

I would like to access the html input tag which is present inside a table inside a form as shown below. I have used the function below to access the element but I'm getting undefined in the output:

  function checkForm()
        {
            var  table=document.getElementById('register').getElementsByTagName('myTab');


            document.writeln(table);

        }

The above function returns undefined. Why, and how can it be fixed to return the input that I need?

        <!DOCTYPE HTML>
        <HEAD>
        <META CHARSET = "utf-8">
        <TITLE>Register</TITLE>
        <link rel="stylesheet" type="text/css" href="reglog.css">
        </HEAD>

        <BODY>
        <h1 align=center>Register with our portal</h1>

        <FORM id="register" onsubmit="return checkForm();" METHOD="POST">

        <table name="myTab" border = 0 align=center>

        <tr >
        <td> Username </td>
        <td> </td>
        <td><input name="username" class=textbox type = text required></td>
        </tr>


        <tr >
        <td> Password </td>
        <td> </td>
        <td><input name="passwd" class=textbox type = password required></td>
        </tr>


        <tr >
        <td> Confirm Password </td>
        <td> </td>
        <td><input name="c_password" class=textbox type = password required></td>
        </tr>



        <tr>
        <td> </td>
        <td> </td>
        <td> <input class=button type = submit value = Register> </td>
        </tr>


        </table>

        </FORM>
        </BODY>
        </HTML>

...ByTagName <- it should be quite clear from the name that you're looking for elements that look like <myTab></myTab>. If you want to look for something with a name, it would be getElementsByName, and the "s" indicates that it returns more than one element, i.e. a nodeList. — adeneo
– adeneo, Commented Jul 24, 2017 at 13:43
Also, stop writing code like it was 1995. Remove the uppercase tagnames, and don't use document.writeln or inline javascript, make sure your attributes are quoted, and validate your HTML. — adeneo
– adeneo, Commented Jul 24, 2017 at 13:45

Horacio Benítez · Accepted Answer · 2017-07-24 13:44:07Z

1

Javascript's getElementsByTagName function works, as it's name says, with html tag names (div, table, form, etc). In your case would be getElementsByTagName('table'). Instead you could use getElementsByName.

answered Jul 24, 2017 at 13:44

Horacio Benítez

917 bronze badges

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

Comments

SLePort · Accepted Answer · 2017-07-24 14:07:52Z

To get the table element with attribute myTab from the element with id register, you can chain a querySelectorAll() method to a getElementById() :

table = document.getElementById('register').querySelectorAll('table[name=myTab]')[0];
console.log(table)

<h1 align=center>Register with our portal</h1>

<FORM id="register" onsubmit="return checkForm();" METHOD="POST">

  <table name="myTab" border=0 align=center>
    <tr>
      <td> Username </td>
      <td> </td>
      <td><input name="username" class=textbox type=t ext required></td>
    </tr>
    <tr>
      <td> Password </td>
      <td> </td>
      <td><input name="passwd" class=textbox type=p assword required></td>
    </tr>
    <tr>
      <td> Confirm Password </td>
      <td> </td>
      <td><input name="c_password" class=textbox type=p assword required></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> <input class=button type=s ubmit value=R egister> </td>
    </tr>
  </table>
</FORM>

Note that getElementsByTagName() get the elements from their name, not from their name attribute.

Nitin Sinha · Accepted Answer · 2017-07-24 13:52:29Z

0

There are various ways to access form elements. In your code you can access form elements using

var x = document.getElementById("register").elements;

This will give you all the elements in your form. However if you want to access first element you can use something like below code

 document.getElementById("register").elements[0].value // 0 is the index as per all the elements present in your form 'register'

answered Jul 24, 2017 at 13:52

Nitin Sinha

1793 bronze badges

Collectives™ on Stack Overflow

accessing html table elements in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related