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>>Solution :
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.