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.

<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}


World Cup Vote




<BODY bgcolor="yellow">
<p style= "background-color:orange;">
Insert descriptive paragraph here
<div align="center">
<form id="form" border="2" method="get" action="#results" style="width: 300px">
<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>
<label for="firstname">First name:</label>
<input type="text" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" id="lastname">
<input type="submit" id="vote" value="Vote">
<p><table id="results" align="center" border="2">
<th>First name</th>
<th>Last name</th>
<th>Favorite Player</th>