Elements not staying visible when function is called

Question

I am creating an input to capture data related to fish that are caught. When the submit button is clicked I see a tr quickly show up then disappear, likewise, I see the console.log message show up for a split second then disappear.

Code is posted below, however running the code snippet doesn't look like it does when seen through a browser. I set up a live site for this here: http://fishrecord.jwhdesign.net/

I realize this is probably simple for most of you to figure out, so no need to tell me how dumb I am as I already know that.

Any help is very much appreciated.

function displayFishData() {
  var table = document.getElementById("test"); //find "test" AKA the table
  var row = table.insertRow(); //add row to that table
  row.insertCell(); //insert cell to table
  console.log("adding a row to the table");
}

table {
  border: 1px solid black;
  margin: 0 auto;
  width: 80%;
}

<h1>Fish Record</h1>
<form>
  Species:
  <select>
    <option value="blank"></option>
    <option value="Northern Pike">Northern Pike</option>
    <option value="Largemouth Bass">Largemouth Bass</option>
    <option value="Smallmouth Bass">Smallmouth Bass</option>
    <option value="Chain Pickerel">Chain Pickerel</option>
    <option value="Pike-Pickerel Hybrid">Pike-Pickerel Hybrid</option>
    <option value="Panfish">Panfish</option>
    <option value="Other">Other</option>
  </select>

  Weight (lbs):
  <input type='number'></input>
  Length (inches):
  <input type='number'></input>
  Comments:
  <input rows="1"></input>
  <br>
  <button onclick="displayFishData()">Submit</button>
</form>

<table id="test">
  <thead>
    <tr>
      <th>Species</th>
      <th>Weight (lbs)</th>
      <th>Length (inches)</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

`` - by default `button`s will act as a submit button when inside a form which is causing it to refresh — Arun P Johny, Apr 12 '16 at 14:07
Read [this question](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Mosh Feu, Apr 12 '16 at 14:13

score 2 · Accepted Answer · answered Apr 12 '16 at 14:13

2

This is because your button is currently refreshing the page,

If you add

type="button"

to the button it will display an extra tr and show the message in the console

answered Apr 12 '16 at 14:13

Koen

634
3
14

koolhuman · Answer 2 · 2016-04-12T14:20:30.337

1

The default value for the type attribute of button element is submit. And thus on click of the button it is submiting the form

Replace

<button onclick="displayFishData()">Submit</button>

to

<button type="button" onclick="displayFishData()">Submit</button>

edited Apr 12 '16 at 14:20

answered Apr 12 '16 at 14:15

koolhuman

1,581
15
25

This'll work, but shouldn't you explain *why* it will work? – nnnnnn Apr 12 '16 at 14:18

Khaled Al-Ansari · Answer 3 · 2016-04-13T09:31:12.940

0

First of all add the displayFishData() to the form not the button! it would look like this <form onsubmit="displayFishData()"> this would help you to control the form output in a better way.

BTW using <input type="submit" /> is a better practice than <button></button>

And for a simpler data inserting do the following:

var table = document.getElementById("test");
var row = table.insertRow();
var e1 = row.insertCell(0);
var e2 = row.insertCell(1);
// keep adding as much rows as you got
// this change the innerHTML
e1.innerHTML = "the data you got from a form element";
// repeat that

edited Apr 13 '16 at 09:31

answered Apr 12 '16 at 14:19

Khaled Al-Ansari

3,910
2
24
27

Calling the function like you have described gives the same problem where the page refreshes, therefore the tr adds then is quickly removed. To use this without the page refreshing, do I need to add anything to the button element? Or am i missing something else? – john_h Apr 12 '16 at 15:07
I updated the answer, try using the input tag @john_h – Khaled Al-Ansari Apr 13 '16 at 09:31

Elements not staying visible when function is called

3 Answers3