Question 206008 in Html Question posted in
Some basic documentation can be found here.

Html – data in table disappears instantly

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search