I want the field entries to be posted to a new row on the table on the same page [without refreshing] but I have no idea what to do. Please help.
<!DOCTYPE HTML>
<HEAD>
<style type="text/css">
body { background-image:url('http://s3.amazonaws.com/br-cdn/temp_images/2014/03/03/bcada532fad70fea292c3dfacdd14e7b.gif?1393878752');
background-repeat:repeat; width:750pt; margin:0 auto;}
p {font-size:12pt; font-family:Trebuchet MS;}
form {font-size:12pt; color:blue; background-color:white}
table { font-size:13pt; color:green; background-color:white}
</style>
<TITLE>
World Cup Vote
</TITLE>
<SCRIPT TYPE="JAVASCRIPT">
function(){
</SCRIPT>
</HEAD>
<BODY bgcolor="yellow">
<p style= "background-color:orange;">
Insert descriptive paragraph here
</p>
<div align="center">
<p>
<form id="form" border="2" method="get" action="#results" style="width: 300px">
<br>
<label for="select">Select player</label>
<select id="player">
<option> <option>
<option 1>p1</option 1>
<option 2>p2</option 2>
<option 3>p3</option 3>
</select>
<br>
<br>
<label for="firstname">First name:</label>
<input type="text" id="firstname">
<br>
<br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname">
<br>
<br>
<input type="submit" id="vote" value="Vote">
<br>
<br>
</form>
</p>
<br>
<br>
<p><table id="results" align="center" border="2">
<tbody>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Favorite Player</th>
</tr>
</tbody>
</table>
</p>
</div>
</BODY>
</HTML>
