Show data from form into automated table using JS/Html

September 22, 2022

I have a basic table inside of a form but the function addData doesn’t seem to run when I click the Add button. Any suggestions? I am trying to make an automatic table to keep track of the needed information.

document.getElementById('DateField').valueAsDate = new Date();

function addData() {
  var store_price = document.getElementById("price");
  var store_moneyback = document.getElementById("moneyback");
  var store_profit = document.getElementById("profit");
  var store_date = document.getElementById("DateField");
  var store_gametype = document.getElementById("gametype");
  var table = document.getElementById("dymanictable");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  row.insertCell(0).innerHTML = store_price.value;
  row.insertCell(1).innerHTML = store_moneyback.value;
  row.insertCell(2).innerHTML = store_profit.value;
  row.insertCell(3).innerHTML = store_date;
  row.insertCell(4).innerHTML = store_gametype;
}

<form>
  <table id='dymanictable'>
    <tr>
      <td><label for="price">Price:</label><br></td>
      <td> <input type="text" id="price" name="price"><br></td>
    </tr>
    <tr>
      <td> <label for="moneyback">Money back:</label><br></td>
      <td> <input type="text" id="moneyback" name="moneyback"><br></td>
    </tr>
    <tr>
      <td> <label for="profit">Profit:</label><br></td>
      <td> <input type="number" id="profit" name="profit" min="-100" max="100"><br></td>
    </tr>
    <tr>
      <label for="DateField">Current date:</label>

      <input type="date" id="DateField" name="DateField" readonly>
    </tr>
    <tr>
      <td> <label for="gametype">Gametype:</label></td>
      <td>
        <select id="gametype" name="gametype">
          <option value="cashgame">Cash game</option>
          <option value="twister">Twister</option>
          <option value="blackjack">Blackjack</option>
          <option value="sitgo">Sit&Go</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <button onclick="addData()">Add</button>
</form>

>Solution :

You are pretty much close.

Things you have to do

Look at the table id='dymanictable' [here single quote should be replaced with double quote]
Create New Table after </form> with headings

Solution is given below:

document.getElementById('DateField').valueAsDate = new Date();

function addData() {
    var store_price = document.getElementById("price");
    var store_moneyback = document.getElementById("moneyback");
    var store_profit = document.getElementById("profit");
    var store_date = document.getElementById("DateField");
    var store_gametype = document.getElementById("gametype");

    var table = document.getElementById("dymanictable");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML = store_price.value;
    row.insertCell(1).innerHTML = store_moneyback.value;
    row.insertCell(2).innerHTML = store_profit.value;
    row.insertCell(3).innerHTML = store_date.value;
    row.insertCell(4).innerHTML = store_gametype.value;
}

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
})

<form>
    <table>
        <tr>
            <td><label for="price">Price:</label><br></td>
            <td> <input type="text" id="price" name="price"><br></td>
        </tr>
        <tr>
            <td> <label for="moneyback">Money back:</label><br></td>
            <td> <input type="text" id="moneyback" name="moneyback"><br></td>
        </tr>
        <tr>
            <td> <label for="profit">Profit:</label><br></td>
            <td> <input type="number" id="profit" name="profit" min="-100" max="100"><br></td>
        </tr>
        <tr>
            <label for="DateField">Current date:</label>

            <input type="date" id="DateField" name="DateField">

        </tr>
        <tr>
            <td> <label for="gametype">Gametype:</label></td>
            <td> <select id="gametype" name="gametype">
                    <option value="cashgame">Cash game</option>
                    <option value="twister">Twister</option>
                    <option value="blackjack">Blackjack</option>
                    <option value="sitgo">Sit&Go</option>
                </select>
            </td>
        </tr>
    </table>

    <br>

    <button onclick="addData()">Add</button>
</form>

<table id="dymanictable" border="1">
    <tr>
        <th>price</th>
        <th>moneyback</th>
        <th>profit</th>
        <th>DateField</th>
        <th>gametype</th>
    </tr>
</table>