Show data from form into automated table using JS/Html-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

When you click 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 JS part.

Here's a fixed version of your code that use the JS fix which basically cancels the click event of the button and 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 am not going to showcase them all for the sake o 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 inut 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.