Taking input from text field and inserting into created table in HTML

Question

So I have 3 text fields for user input and when text is entered and the "Register" button is pressed I wish for a new row featuring 3 cells (One for each field) to be created showing the text the user entered. But for the life of me I cannot figure out how to capture the input from the text field and insert it into the table cells. I've tried playing with document.getElementbyId and .innerHTML but it doesn't seem to work.

Right now "undefined" just appears in the cell.

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">
        
                <title>Student Page</title>
        
                <script type ="text/javascript">src = "registerBox.js" </script>
        
            </head>
            <body>
                <div id = "all">
        
                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>
                    
            

            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>

               
            </table>
                
            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName;

                        document.getElementById("courseName").innerHTML = courseName;
                        
                        cell1.innerHTML = courseName;
                        cell2.innerHTML = "test2";
                        cell3.innerHTML = "test3";
                    }
                </script>
            </body>
</html>

ncardeli · Accepted Answer · 2017-10-26 14:15:19Z

You are almost there. The problem is this line:

document.getElementById("courseName").innerHTML = courseName;

To get the value of the input with id "courseName" and set it to the variable called courseName, you should do this instead:

var courseName = document.getElementById("courseName").value;

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">
        
                <title>Student Page</title>
        
                <script type ="text/javascript">src = "registerBox.js" </script>
        
            </head>
            <body>
                <div id = "all">
        
                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>
                    
            

            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>

               
            </table>
                
            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        console.log(enrolled)
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName = document.getElementById("courseName").value;
                        
                        cell1.innerHTML = courseName;
                        cell2.innerHTML = "test2";
                        cell3.innerHTML = "test3";
                    }
                </script>
            </body>
</html>

grantmx · Accepted Answer · 2017-10-26 14:17:40Z

0

If you are using vanilla JS then you can just use a simple

let courseName = document.getElementById("courseName").value;

if you want to use jQuery then this will suffice:

let coursename = $("#courseName").val();

You main problem was that you were assuming the JS treats form elements the same as text elements, but its a different monkey.

answered Oct 26, 2017 at 14:17

grantmx

4194 silver badges11 bronze badges

Comments

DILIP KACHHOT · Accepted Answer · 2017-10-26 14:36:56Z

try this:

<html>
        <head>
                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">

                <title>Student Page</title>

                <script type ="text/javascript">src = "registerBox.js" </script>

            </head>
            <body>
                <div id = "all">

                <h1 align="center">Student page of NAMEHERE</h1>
                    <h2 align="center">NAMEHERE's Class Schedule</h2>



            <table id ="enrolled" align="center">
                <tr id ="titleRow">
                        <th>Course</th>
                        <th>Course Number</th>
                        <th>Room</th>
                </tr>


            </table>

            <div id = "registerBox">
                <button onclick="addCourse()">Register</button>
                <input type = "text" id = "courseName" placeholder= " Course Name">
                <input type = "text" id = "courseNumber" placeholder = "Course Number">
                <input type = "text" id = "Room" placeholder = "Room">
            </div>

                </div>

                <script>
                    function addCourse() {
                        var i = 1 ;
                        var row = enrolled.insertRow(i);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);

                        var courseName;

                       courseName=document.getElementById('courseName');
                       courseNumber=document.getElementById('courseNumber');
                       room=document.getElementById('Room');
                        cell1.innerHTML = courseName.value;
                        cell2.innerHTML = courseNumber.value;
                        cell3.innerHTML = room.value;
                    }
                </script>
            </body>
</html>

Collectives™ on Stack Overflow

Taking input from text field and inserting into created table in HTML

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