values get hidden after beeing posted

johnwalker · 10-25-2012, 12:54 PM

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>

devnull69 · 10-25-2012, 01:20 PM

The submit button will refresh the page (reload it from server or cache). And the reloaded version will not contain the previously dynamically added rows.

To prevent the page from refreshing, you should "return false" and the function should be called onsubmit of the form instead of onclick of the submit button.

Code:

<form onsubmit="addRow(); return false;">
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">
</form>