form data display javascript

Abhishek answered on January 28, 2022 Popularity 8/10 Helpfulness 2/10

answer form data display javascript

form data display javascript

Comment

// Form Details display in plain JAVASCRIPT
// HTML
  <body>
    <form action="#">
      <input
        type="text"
        id="myName"
        placeholder="enter your name"
      /><br /><br />
      <input
        type="text"
        id="myNumber"
        placeholder="enter your Number"
      /><br /><br />
    </form>
    <input type="submit" onclick="buttonSubmit()" />
    <table id="user-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>

      <tbody id="user-table-data"></tbody>
    </table>
  </body>

// javascript
  <script>
    let userList = [];
    const buttonSubmit = () => {
      let nameInput = document.getElementById("myName").value;
      let numberInput = document.getElementById("myNumber").value;
      let myData = {
        name: nameInput,
        number: numberInput,
      };
      userList.push(myData);
      localStorage.setItem("userData", JSON.stringify(userList));
      tableDataPopulate();
    };
    const tableDataPopulate = () => {
      const allData = localStorage.getItem("userData");
      const table = document.getElementById("user-table-data");
      let userHtml = "";
      userList.forEach((user, i) => {
        userHtml += `<tr><td>${user.name}</td><td>${user.number}</td></tr>`;
      });
      table.innerHTML = userHtml;
    };
  </script>

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: display form-data javascript

Link to this answer
Share Copy Link

Contributed on Jan 28 2022

Abhishek

0 Answers Avg Quality 2/10

form data display javascript

Contents

More Related Answers

form data display javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.