I'm trying to to display the inputted data in the form using the addRow() function but i don't know why shortly after pressing the submit button the table quickly show and hides the values. Can anyone take a look in the code and tell me what i'm doing wrong , i think i'm loosing it here :-(
This is the code:
Code:
<HTML>
<HEAD>
<TITLE>Test sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript">
function addRow(){
var table = document.getElementById('results');
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
td1.innerHTML = document.getElementById('name).value;
td2.innerHTML = document.getElementById('lname').value;
td3.innerHTML = document.getElementById('year').value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
}
</script>
</HEAD>
<BODY>
<h1 style="text-align:center;"> <h1>Text heading</h1>
<h5 style="text-align:left;"> <h5> Text heading sample </h5>
<form>
Name:<br>
<input type="text" id="name"><br>
Last Name: <br>
<input type="text" id="lname"><br>
Age: <br>
<input type="text" id ="year"><br>
<input type="submit" id ="buton" value="Submit" onclick="addRow()">
</form>
<table border="1" id = "results">
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</table>
</BODY>
</HTML>