0

am trying to display data to a table from my array but its not working here is my html

<form action="" method="POST">
    <div class="form-group">
        <label for="Name">Teachers Name</label>
        <input class="form-control" name="name" id="name">
    </div>

    <div class="form-group">
        <label for="subject">Subject</label>
        <input class="form-control"  id="subject">
    </div>
...
<button type="submit" class="btn btn-primary" id="submit" onclick="addTo()">Submit</button>
</form>
<table id="table">
    <tr>
        <th>NAME</th>
        <th>subject</th>
        <th>day</th>
        <th>time</th>
    </tr>
    <!-- JS will insert here new TR -->
</table>

javascript

let EL_name = document.getElementById("name"),
    EL_subject = document.getElementById("subject"),
    EL_time = document.getElementById("time"),
    EL_day = document.getElementById("day"),
    EL_table = document.getElementById("table"), // Our empty table in HTML
    arr = [];  



function addTo() {


    let obj = {
        name : EL_name.value,
        subject : EL_subject.value,
        time: EL_time.value,
        day : EL_day.value
    };

    // Create Row
    let row = `<tr>
               <td>${obj.name}</td>
               <td>${obj.subject}</td>
                <td>${obj.time}</td>
                 <td>${obj.day}</td>
             </tr>`;

    // Clear inputs
    EL_name.value = EL_day.value = "";

    // Store into Array
    arr.push( obj );

    // Insert row into table
    EL_table.insertAdjacentHTML("beforeend", row);

but it does not display on table i see it for a few seconds when submitting then it disappears it looks like its not cached somewhere please help

0 Answers0