Unable to save input data from HTML table cells into JavaScript variables

Question

I have tried to put input from a user into cells of a table, which was created using HTML and to save that data into a variable of JavaScript.

I was trying to get the data from rows cell of table to JavaScript variables one by one, but I'm getting undefined in place of data when alerting the data after summit.

HTML code

 <table border = "2" cellpadding = "6" cellspacing = "6" bordercolor = "white" bgcolor = "red" class="center" id="mytable" >
        <tr>
            <th style="background: white;">EDUCATION</th>
            <th style="background: white;">INSTITUTE</th>
            <th style="background: white;">PERCENTAGE</th>
        </tr>
        <tr>
            <td style="color: white;">10 th</td>
            <td id="10inst"><input type="text"></td>
            <td  id="10per"><input type="text"></td>
        </tr>
        <tr>
            <td style="color: white;" >12 th</td>
            <td  id="12inst"><input type="text"></td>
            <td  id="12per"><input type="text"></td>
        </tr>
        <tr>
            <td style="color: white;">Graduaction</td>
            <td  id="gradinst"><input type="text"></td>
            <td  id="gradper"><input type="text"></td>           
        </tr>
        <tr>
            <td style="color: white;">Masters</td>
            <td id="masterinst"><input type="text"></td>
            <td id="masterper"><input type="text"></td>           
        </tr>

    </table><br><br>

JavaScript code

var inst10 = document.getElementById("mytable").value;
var inst12 = document.getElementById("12inst").value;
var masterinst = document.getElementById("masterinst").value;
var per10 = document.getElementById("10per").value;
var per12 = document.getElementById("12per").value;
var masterper = document.getElementById("masterper").value;
var gradinst=document.getElementById("gradinst").value;
var gradper=document.getElementById("gradper").value;

Welcome to SO ! I think this is because when you initialize your variables, inputs are empty. — antoineso
– antoineso, Commented Jan 27, 2021 at 8:13

Ravid · Accepted Answer · 2021-01-29 08:24:19Z

1

There might be 2 problems in your code:

Make sure you run your JavaScript only after you enter text in the input elements.
You have <input> element inside <td> element. It means that when you getElementById of the <td> - you are not yet referencing the '' element. And the .value of '' is really undefined. So to fix that:

instead of

var inst12 = document.getElementById("12inst").value;

do:

var inst12 = document.getElementById("12inst").childNodes[0].value;

Full working example: https://jsfiddle.net/1dpg5j3q/

edited Jan 29, 2021 at 8:24

answered Jan 27, 2021 at 8:22

Ravid

3033 silver badges9 bronze badges

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

2 Comments

AnonymousKing Over a year ago

no its not working for me if you can please send me the full code of both html and JavaScript

Ravid Over a year ago

Yes. I created an example here: jsfiddle.net/1dpg5j3q just enter text into your table cells, then click button "invoke javascript" (this solves the first problem I mentioned about running JS only after entering text), then you will see the inputs in the console. The JavaScript code has my solution for the second problem I mentioned.

Veysel Erdemci · Accepted Answer · 2021-01-27 08:13:33Z

0

You must be add "id" attribute in input elements, not td elements or table elements

Like this;

<input id="12inst" type="text">

answered Jan 27, 2021 at 8:13

Veysel Erdemci

612 bronze badges

Collectives™ on Stack Overflow

Unable to save input data from HTML table cells into JavaScript variables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related