data in table disappears instantly

Question

This is my very first web project. My problem is that the data that I enter disappears immediately after showing up. I use in general VSCode but tried it in different editors too, and sometimes it works. the functions are not working correctly either, but they do it sometimes. I'm confused about what I do wrong, sometimes it works sometimes it doesn't.

function addContact() {
  var name = document.getElementById('inpName').value;
  var tel = document.getElementById('inpTel').value;
  var address = document.getElementById('inpAddress').value;

  var table = document.getElementById('tab').getElementsByTagName('tbody')[0];
  var row = table.insertRow(-1);

  var nameCell = row.insertCell(0);
  var telCell = row.insertCell(1);
  var addressCell = row.insertCell(2);

  nameCell.innerHTML = name;
  telCell.innerHTML = tel;
  addressCell.innerHTML = address;

  document.getElementById('inpName').value = '';
  document.getElementById('inpTel').value = '';
  document.getElementById('inpAddress').value = '';
}

function search() {
  var searchInput = document.getElementById('searchInput').value.toLowerCase();

  var table = document.getElementById('tab');
  var rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

  for (var i = 0; i < rows.length; i++) {
    var nameCell = rows[i].getElementsByTagName('td')[0];
    var name = nameCell.innerHTML.toLowerCase();

    if (name.includes(searchInput)) {
      rows[i].style.display = '';
    } else {
      rows[i].style.display = 'none';
    }
  }
}

body {
  color: black;
  background-color: #202e39;
}

h1 {
  font-family: Verdana, sans-serif;
  color: Blue;
  text-align: center;
}

table {
  width: 100%;
  font-size: 32px;
  border-collapse: collapse;
  background-color: #2c3d4b;
}

th,
td {
  border: 2px solid black;
  padding: 25px 15px;
  text-align: left;
}

th {
  background-color: royalblue;
}

tr:nth-child(even) {
  background-color: lightgrey;
}

form {
  text-align: center;
}

.inpContainer {
  display: flex;
}

input {
  width: 192px;
  align-items: center;
  margin: 1px;
}

#btnSubmit {
  cursor: pointer;
}

<h1 id="welcome">Michas Address Book</h1>
<div class="inpContainer">
  <form name="eingabe">
    <input placeholder="Enter name here..." type="text" id="inpName"><br>
    <input placeholder="Enter telephone here..." type="tel" id="inpTel"><br>
    <input placeholder="Enter address here..." type="text" id="inpAddress"><br>
    <input id="btnSubmit" type="submit" onclick="addContact()">
  </form>
</div>
<div class="conSearch">
  <input type="text" id="searchInput" placeholder="Search...">
  <button onclick="search()">Search</button>
</div>
<table id="tab">
  <thead>
    <tr>
      <th>Name</th>
      <th>Tel</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

the only valid child elements of html are head and body. The script is invalidly placed and must either be contained within the body or head. The issue itself is caused by the submit button which will reload the page which you can prevent by using `submitElement.preventDefault()`. — tacoshy, Jul 12 '23 at 07:23
Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Konrad, Jul 12 '23 at 07:26

score 1 · Accepted Answer · answered Jul 12 '23 at 07:38

The main problem here is that you're performing a submit in your button

<input id="btnSubmit" type="submit" onclick="addContact()">

by default submit reload the page so you have two choice.

N.1

Adding in your onclick a preventDefault function that prevent the page from being reloaded

<input id="btnSubmit" type="submit" onclick="event.preventDefault(); addContact()">

N.2

Changing your input with a button

<button id="btnSubmit" type="button" onclick="addContact()">submit</button>

Hope this is helping you.

score 0 · Answer 2 · answered Jul 12 '23 at 07:38

0

simply change

<input id="btnSubmit" type="submit" onclick="addContact()">

to:

<input id="btnSubmit" type="button" value="Submit" onclick="addContact()">

to prevent the button from refreshing the page

answered Jul 12 '23 at 07:38

Lendy345

34
6

data in table disappears instantly

2 Answers2