[ANSWERED] Display JavaScript Object at the Bottom of HTML Form

Question 1

I have been able to solve this. I was able to create an html table and dynamically fill it as a user inputs information. The javascript will add the information dynamically to the first row and continue to do so as more information is added.

Updated HTML below:

<!DOCTYPE html>
<html lang="en">
    <head>

            <!--Required Meta Tag-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        .center {
        text-align: center;
        border: 3px solid green;
        }

        body {
        font-family: Arial;
        margin: 0;
        }

        /* Header/Logo Title */
        .header {
            padding: 10px;
            text-align: center;
            background: #1abc9c;
            color: white;
            font-size: 20px;
        }

        table, td {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
    <title>Student Report Card</title>

    </head>
    <body>

        <div class="header">

            <br>
            <h2>Student & Grade Input Form</h2>
            <br>
    
        </div>
            <br>
            <div class="container">
                <h1>Register</h1>
                <p>Please fill in this form to create an account.</p>
                

                
                <input type="text" placeholder="Enter name" name="name" id="name" required><br>
                <br>
                
                <input type="email" placeholder="Enter Email" name="email" id="email" required><br>
                <br>
                
                <input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
                <br>
                
                <input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
                <br>
                
                <input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
                <br>
                <button type="submit" id="btn1">Submit</button>

                <br><br>


                <table id="myTable">
                    <tr>
                        <td>Name</td>
                        <td>Email</td>
                        <td>Math Grade</td>
                        <td>English Grade</td>
                        <td>Social Studies Grade</td>
                    </tr>
                </table>
               
                
            </div>

        <script src="scripts.js"></script>
    </body>
</html>

Updated Javascript below:

var studentList = new Object()

function inputFunc(){

    var fname = document.getElementById("name").value 
    var email = document.getElementById("email").value
    var math = document.getElementById("math").value
    var eng = document.getElementById("eng").value
    var sstd = document.getElementById("sstd").value

    var x = Math.floor((Math.random() * 100) + 1);
    var y = x.toString();
    studentID = "student".concat(y)
    
    studentNumber = "student".concat(y)

    var studentID = new Object();
    studentID.name = fname
    studentID.email = email
    studentID.math = math
    studentID.eng = eng
    studentID.sstd = sstd

    studentList[studentNumber] = studentID
    
    
    // variable of javascript object, place each element in a variable with stringfy
    var studentInformation = studentList[studentNumber]
    console.log(typeof studentInformation)
    var obj = String(studentInformation.name)
    var obj1 = String(studentInformation.email)
    var obj2 = String(studentInformation.math)
    var obj3 = String(studentInformation.eng)
    var obj4 = String(studentInformation.sstd)


    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0)
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = obj;
    cell2.innerHTML = obj1;
    cell3.innerHTML = obj2;
    cell4.innerHTML = obj3;
    cell5.innerHTML = obj4;



}

Question 2

I think this is just an issue of adding items to objects. Here is an example

let studentInfo;
studentInfo.push({ name: "John", email: "[email protected]" });

This answer in incorrect.

Question 3

I have an HTML Form that a user needs to fill out. It is information about a Student (Name, Email, Grade, Math, English, Social Studies). What I am trying to do is when the user fills out the Form and clicks the Submit button. It creates a JavaScript Object and adds it into another JS Object. I want the information input in the Form to display at the bottom of the webpage. I am purposely not using a database. I just want the information to exist while the page is up.

This is the HTML Form:

<!DOCTYPE html>
<html lang="en">
    <head>

            <!--Required Meta Tag-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <style>
        .center {
        text-align: center;
        border: 3px solid green;
        }

        body {
        font-family: Arial;
        margin: 0;
        }

        /* Header/Logo Title */
        .header {
            padding: 10px;
            text-align: center;
            background: #1abc9c;
            color: white;
            font-size: 20px;
        }
    </style>
    <title>Student Report Card</title>

    </head>
    <body>

        <div class="header">

            <br>
            <h2>Student & Grade Input Form</h2>
            <br>
    
        </div>
            <br>
            <div class="container">
                <h1>Register</h1>
                <p>Please fill in this form to create an account.</p>
                

                
                <input type="text" placeholder="Enter name" name="name" id="name" required><br>
                <br>
                
                <input type="email" placeholder="Enter Email" name="email" id="email" required><br>
                <br>
                
                <input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
                <br>
                
                <input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
                <br>
                
                <input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
                <br>
                
                <input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
                <br>
                <button type="submit" id="btn1">Submit</button>



                <ul id="myList">
                    
                </ul>
               
                
            </div>

        <script src="scripts.js"></script>
    </body>
</html>

This is the Javascript Code:

document.getElementById("btn1").addEventListener("click", inputFunc)



var studentList = new Object()

function inputFunc(){

    var fname = document.getElementById("name").value 
    var email = document.getElementById("email").value
    var math = document.getElementById("math").value
    var eng = document.getElementById("eng").value
    var sstd = document.getElementById("sstd").value

    var x = Math.floor((Math.random() * 100) + 1);
    var y = x.toString();
    studentID = "student".concat(y)
    

    var studentID = new Object();
    studentID.name = fname
    studentID.email = email
    studentID.math = math
    studentID.eng = eng
    studentID.sstd = sstd

    studentList[studentID] = studentID
    console.log(studentList)
    

    var obj = JSON.parse(JSON.stringify(studentList))

    var information = document.getElementById("demo").innerHTML = obj.fname + ", " + obj.email +  ", " + obj.math;

    var node = document.createElement("LI");
    var textnode = document.createTextNode(information);
    node.appendChild(textnode);
    document.getElementById("myList").appendChild(node);

}

I am using the Random() method in JavaScript to create a random number that I am concatenating to the the “student” so it give it a unique ID. This is working correctly. I just can’t display the information at the bottom of the page.

The Goal is after the user inputs information in the form it will display the content of the object below like so:

 - Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies

Bollate

[ANSWERED] Display JavaScript Object at the Bottom of HTML Form

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by GetSet

Comment posted by imvain2

Comment posted by How to Ask

Comment posted by Heretic Monkey

Comment posted by PythonCoder1981

Comment posted by Heretic Monkey

By

Related Post

[ANSWERED] problem in selecting list item in html/css

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – Trying to align a div to the right using CSS

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate