Submit form on same page without page refresh

[sg552]

Hello everyone,

I have a working page in PHP. What this page do is student will keyin his/her ID and press Papar (Display in English) and th result will be shown in the same page in a lightbox.

The problem is (well not really a problem) the page need to be refresh before the user can see their result:

More information on my page here:
http://www.smkhutankampong.co.cc/infopendidikan.php

Insert 158756873427 and click Papar. You will see their examination result in a lightbox. Also if you notice the page is referesh. If you click on query popup on the left menu you will see the page is not being refresh and the lightbox is nicely shown.

So if anyone could help me changing my code to use AJAX this wil be nice. Right now I sit infront of my computer like 6 hours to learn AJAX but nothing I can find to use user input variable on the same page without page refresh.

Anyway this is my infopendidikan.php code

<?php

//if the "submit"variable does not exist
//form has not been submitted
//display initial page
if (!$_POST['submit'])
{
?>
 <p>Sila masukkan No. Kad Pengenalan anda diruangan yang disediakan dan klik butang <i>Papar</i> keputusan.</p>
 
  <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" name="form1" id="form1" >
<p>
<label><strong>No. Kad Pengenalan:</strong></label> 
<input name="no_KP" type="text" size="20" maxlength="20" id="FirstName" value="Contoh: 896537841253"/> 
<label><strong>Jenis Peperiksaan:</strong></label> 
<label for="select"></label>
<select name="select" id="select">
  <option value="PMR">PMR</option>
  <option value="SPM">SPM</option>
</select>
<br /><br />

<input class="button" type="submit" name="submit" id="button" value="Papar" />
</p>
</form>

<?php

}


else
{
//if the "submit" variable exists
//the form has been submitted
//look for and process form data
//display result

// Make a MySQL Connection
//mysql_connect("localhost", "hadi_smkhk", "5fs8l89h2vc3g") or die(mysql_error());
//mysql_select_db("smkhutan_") or die(mysql_error());

mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("exam") or die(mysql_error());

// tapis input pengguna
$no_KP = mysql_real_escape_string($_POST['no_KP']);
$select = mysql_real_escape_string($_POST['select']);

// Cari No. KP user dalam pangkalan data
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='$no_KP' AND jenis_exam='$select'");  

// get the first (and hopefully only) entry from the result
$row = mysql_fetch_array( $result );
// Print out the contents of each row into a table 

// Banding No. KP user & papar maklumat
if ($row['no_KP'] == "")
{
	echo "<p>Tiada maklumat dijumpai :(";

}
else
{

	echo "<script type='text/javascript'>
$(document).ready(function(){ 
                jQuery.facebox({ div: '#info' })
})
</script>";

echo "<div id=\"info\" style=\"display:none;\">";

echo "<div align=\"center\"><h3>Penilaian Menengah Rendah<br>SMK Hutan Kampong</h3> </div>";


echo "<b>Nama : </b>" .$row['nama']. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>No. K/P : </b>" .$row['no_KP'];

// Get a specific result from the "example" table
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP= '$no_KP' ORDER BY kod_subjek ");  

echo "<form><p><table border='0'>";
echo "<tr> <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kod M/P&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th><div align=\"left\">Nama Mata Pelajaran&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th>Gred</th> </tr>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array( $result )) {
	// Print out the contents of each row into a table
	echo "<tr><td>"; 
	echo "<div align=\"center\">" .$row['kod_subjek']. "";
	echo "</td><td>"; 
	echo $row['subjek'];
	echo "</td><td>"; 
	echo "<div align=\"center\">" .$row['gred'];
	echo "</td></tr>"; 
} 

echo "</table></p></form>";
echo "<A HREF=\"javascript:window.print()\">Cetak</A>";


echo "</div>";



}
}
?>

Any help is appreciated. Thanks in advance. :)