CODEWITHSUNDEEP
javascripthtml
user2932473
user2932473

Reputation: 25

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

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>

Upvotes: 1

Views: 2505

Answers (3)

DILIP KACHHOT
DILIP KACHHOT

Reputation: 26

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>

Upvotes: 0

grantmx
grantmx

Reputation: 409

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.

Upvotes: 0

ncardeli
ncardeli

Reputation: 3502

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>

Upvotes: 1

Related Questions