Show data from form into automated table

Question

I have a basic table inside of a form, but the function addData doesn't seem to run when I click the Add button. How can I fix it?

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>

It _does_ get called - but any effect it might have had, is immediately negated by the form getting submitted, which reloads the page. Add `type="button"` on your button element, to make this a "click button", instead of a _submit_ button. — CBroe, Sep 22 '22 at 10:36
Re *"dymanictable"*: Do you mean *"dynamictable"*? (*[dynamic](https://en.wiktionary.org/wiki/dynamic#Adjective)*) — Peter Mortensen, Sep 23 '22 at 04:38

score 2 · Accepted Answer · edited Sep 23 '22 at 04:16

You are pretty much close. You have to create a new table after </form> with headings.

The 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>

A side note, *"here single quote should be replaced with double quote..."* this is not required nor has anything to do with the OP's issue. Single quotes are [valid](https://stackoverflow.com/questions/2210430/are-single-quotes-valid-in-html-xhtml/2210452#2210452) in `HTML` attributes just like double quotes. — ThS, Sep 22 '22 at 13:05
*Why* is it necessary to create a new table? Please respond by [editing (changing) your answer](https://https://stackoverflow.com/posts/73813196/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). From [the Help Center](https://stackoverflow.com/help/promotion): *"...always explain why the solution you're presenting is appropriate and how it works"*. — Peter Mortensen, Sep 23 '22 at 04:37

score 2 · Answer 2 · edited Sep 23 '22 at 04:22

When you click the Add button, you actually submit the form, because you didn't specify a type for that button which defaults to type=submit.

The fix is fairly easy. You either specify the type=button which doesn't submit the form or you can prevent the form submission in the JavaScript part.

Here's a fixed version of your code that use the JavaScript code fix which basically cancels the click event of the button. Thus the form doesn't get submitted and the rest of your addData function should be executed as wanted:

There are plenty of ways to fix that, and I am not going to showcase them all for the sake of simplicity and shortness.

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

/** that function now expects a parameter, the "event" object */
function addData(e) {
  /** prevent the form submission */
  e.preventDefault();
  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>
  <!-- pass the "event" object to the click listener -->
  <button onclick="addData(event)">Add</button>
</form>

Note: the line row.insertCell(3).innerHTML = store_date (and the one next) are not typing the value from that input, but instead the input element itself which calls the toString method on it which prints [object HTMLInputElement]. The fix is fairly simple, but is out of the scope of the answer.

Show data from form into automated table

2 Answers2