I am new to this. I am trying to get input from a form and display in a table. But it returns an empty row.

<form>
        <label>Name:</label><br>
        <input id = "name" type="text"><br><br>
        <label>Age:</label><br>
        <input id = "age" type="text"><br><br>
        <label>Email:</label><br>
        <input id = "email" type="text"><br><br>
    </form>
    <button id = "entry">ADD</button>    
    <table id = "display">   
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>              
    </table>

I did console.log, the values are displayed there. What am I doing wrong?

var entry = document.getElementById("entry")
entry.addEventListener("click", displayDetails)
var row = 1;
function displayDetails(){
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    var email = document.getElementById("email").value; 

    var display = document.getElementById("display");
    var newRow = display.insertRow(row);
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);

    cell1.innerHtml = name;
    cell2.innerHtml = age;
    cell3.innerHtml = email;

    row  ;    
}

CodePudding user response：

Try making changing "innerHtml" to "innerHTML". These lowercase letters could be creating an error because this is case sensitive.

CodePudding user response：

You may want to take advantage of the FormData API and native form validation using onsubmit and the pattern attribute.

Note: Form fields should have a name attribute for the form API to work correctly.

You can even call form.reset() to clear the form.

const personForm = document.forms['person-form'];
const table = document.querySelector('#display');

// Default values set dynamically...
personForm.elements.name.value = 'Joe';
personForm.elements.age.value = '25';
personForm.elements.email.value = '[email protected]';

const handleAdd = (event, form) => {
  event.preventDefault();

  const formData = new FormData(form);
  const tr = document.createElement('tr');
  
  [...table.querySelectorAll('thead > tr th')]
    .map(th => th.getAttribute('data-field'))
    .forEach(field => {
      const td = document.createElement('td');
      td.innerText = formData.get(field);
      tr.append(td);
    });
  
  table.querySelector('tbody').append(tr);
  form.reset();
};

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
}

form[name="person-form"] {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.5rem;
}

#display, #display th, #display td {
  border: thin solid grey;
}
#display {
  border-collapse: collapse;
}
#display th, #display td {
  padding: 0.25rem;
}
#display thead {
  background: #DDD;
}
#display tbody tr:nth-child(even) {
  background: #EEE;
}

<form name="person-form" onsubmit="handleAdd(event, this)">
  <label for="name-text">Name:</label>
  <input id="name-text" name="name" type="text" required>
  <label for="age-text">Age:</label>
  <input id="age-text" name="age" type="text" pattern="\d " required>
  <label for="email-text">Email:</label>
  <input id="email-text" name="email" type="text" pattern="\w @\w \.\w " required>
  <button type="submit">Add</button>
</form>
<hr />
<table id="display">
  <thead>
    <tr>
      <th data-field="name">Name</th>
      <th data-field="age">Age</th>
      <th data-field="email">Email</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>