Html Question posted in
Some basic documentation can be found here.

How to dynamically add form values to a new row in an HTML table?

I’m trying to dynamically add the values from a form into an HTML table. Each time the user submits the form, the values should be added as a new row in the table. However, I’m unsure how to append the new values to a new row and ensure that subsequent form submissions go to the next row.

Here’s the structure of my HTML form:

<form id="schedule-form">
  <label for="Name">Name:</label>
  <input type="text" name="Name" id="name">
  
  <label for="program">Course:</label>
  <select id="program">
    <option value="BSIT">BSIT</option>
    <option value="BSHM">BSHM</option>
    <option value="BSCRIM">BSCRIM</option>
    <option value="BSED">BSED</option>
    <option value="BEED">BEED</option>
  </select>
  
  <label for="subjects">Subject:</label>
  <select id="subjects"></select>
  
  <label for="room">Room:</label>
  <select id="room">
    <option value="IT Room 1">IT Room 1</option>
    <option value="IT Lab 1">IT Lab 1</option>
    <option value="IT Lab 2">IT Lab 2</option>
    <option value="IT Lab 3">IT Lab 3</option>
  </select>
  
  <label for="day">Day:</label>
  <select id="day">
    <option value="MWF">MWF</option>
    <option value="TTH">TTH</option>
    <option value="Mon">Mon</option>
    <option value="Tue">Tue</option>
    <option value="Wed">Wed</option>
    <option value="Thu">Thu</option>
    <option value="Fri">Fri</option>
  </select>
  
  <label for="start-time">Start Time:</label>
  <input type="time" id="start-time">
  
  <label for="end-time">End Time:</label>
  <input type="time" id="end-time">
  
  <button type="submit">Schedule</button>
</form>

And here’s the table where I want to display the scheduled classes:

<h3>Scheduled Classes</h3>
<table>
  <thead>
    <th>Name</th>
    <th>Course</th>
    <th>Subject</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody id="schedule-table">
    
  </tbody>
</table>

Here’s my current JavaScript (which is not working):

document.getElementById('schedule-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Get form values
  let name = document.querySelector('[name="Name"]').value;
  let course = document.getElementById('program').value;
  let subject = document.getElementById('subjects').value;
  let room = document.getElementById('room').value;
  let day = document.getElementById('day').value;
  let startTime = document.getElementById('start-time').value;
  let endTime = document.getElementById('end-time').value;

  // I need help figuring out how to append these values to a new table row
  // and ensure that multiple submissions add to the next row

});
Tags:

2

Answers


  1. 0

    Best to create an object with the data and then write a simple function that createElement and append that to the table you want.

    1. Create an object with the values from the form. Since you only have a table column for time, I added a String for time that takes the start time and the end time.
    2. Write a function (function addSchedule(Object) { ... }) and call that function (addSchedule(Object)) while handing over the object as a parameter.
    3. Create a constant that is used to create a new element: const Element = document.createElement('tr')
    4. Iterate through the Object with a for-loop. See the MDN WebDocs Documentation
    5. Same as step 3, create an element for the new td that is temporarily saved within a constant.
    6. Include the value by using Element.textContent = value
    7. Append the TD to the TR constant by using TR.appendChild(TD)
    8. Same as step 7, append the TR to tbody
    document.getElementById('schedule-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Get form values
  const DataSet = {
    name: document.querySelector('[name="Name"]').value,
    course: document.getElementById('program').value,
    subject: document.getElementById('subjects').value,
    room: document.getElementById('room').value,
    day: document.getElementById('day').value,
    time: `${document.getElementById('start-time').value} - ${document.getElementById('end-time').value}`
  }
  
  addSchedule(DataSet);
});

function addSchedule(DataSet) {
  const newTR = document.createElement('tr');
  
  for (const [key, value] of Object.entries(DataSet)) {
    const newTD = document.createElement('td');
    newTD.textContent = value;
    newTR.appendChild(newTD);
  }
  
  document.getElementById('schedule-table').appendChild(newTR);
}
    <form id="schedule-form">
  <label for="Name">Name:</label>
  <input type="text" name="Name" id="name">
  
  <label for="program">Course:</label>
  <select id="program">
    <option value="BSIT">BSIT</option>
    <option value="BSHM">BSHM</option>
    <option value="BSCRIM">BSCRIM</option>
    <option value="BSED">BSED</option>
    <option value="BEED">BEED</option>
  </select>
  
  <label for="subjects">Subject:</label>
  <select id="subjects"></select>
  
  <label for="room">Room:</label>
  <select id="room">
    <option value="IT Room 1">IT Room 1</option>
    <option value="IT Lab 1">IT Lab 1</option>
    <option value="IT Lab 2">IT Lab 2</option>
    <option value="IT Lab 3">IT Lab 3</option>
  </select>
  
  <label for="day">Day:</label>
  <select id="day">
    <option value="MWF">MWF</option>
    <option value="TTH">TTH</option>
    <option value="Mon">Mon</option>
    <option value="Tue">Tue</option>
    <option value="Wed">Wed</option>
    <option value="Thu">Thu</option>
    <option value="Fri">Fri</option>
  </select>
  
  <label for="start-time">Start Time:</label>
  <input type="time" id="start-time">
  
  <label for="end-time">End Time:</label>
  <input type="time" id="end-time">
  
  <button type="submit">Schedule</button>
</form>

<h3>Scheduled Classes</h3>
<table>
  <thead>
    <th>Name</th>
    <th>Course</th>
    <th>Subject</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody id="schedule-table">
    
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    I agree with @tacoshy, but i will use insertRow() and insertCell() instead. Like

    let dataArr = ['name', 'Course', 'Subject', 'Room', 'Day', 'Time']

function addSchedule(arr) {
    let table = document.getElementById("schedule-table")
    let newRow = table.insertRow(-1)

    for (let i = 0; i < arr.length; i++) {
        let newcell = newRow.insertCell(-1)
        newcell.innerHTML = arr[i]
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search