Ajax form onsubmit stop refresh - php

Question

I have one page lets call it "X.php" that i use that calls another page "Y.php" with the xmlhttp.open() function.
At the moment i have a form in page Y.php, and i would like to prevent it from refreshing because once i click on the submit button, my form dissapear.
I tryed with Jquery 'event.preventDefault()' in page X.php but nevertheless it didnt work.
Does anyone know a solution?
while($row = mysql_fetch_array($query)) {
echo " <h2>Update your personal settings</h2>
<form action='' id='target' method='POST'>
Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>
<input type='submit' value='Whatever' id='test1'/>
</form>";
}
Java script:
<script type="text/javascript">
$(document).ready(function(){
$("#test1").click(function(event){
event.preventDefault();
});
});

Answer 1

In your form tag. Add onSubmit="return false;
<form action='' id='target' method='POST' onSubmit="return false;>
Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>
<input type='submit' value='Whatever' id='test1'/>
</form>
As #andrew mentions. Your php script will generate multiple <form> tags which will all have the same id id='target'. This can cause problems on your page as that isnt valid html

Answer 2

I would have thought that the javascript you posted should work actually.
But if this is your actual code I suspect it fails because all of the submit buttons on all forms have id='test1' and id should be unique
Try like this:
$i=0;
while($row = mysql_fetch_array($query)) {
echo " <h2>Update your personal settings</h2>
<form action='' id='target."$i++".' method='POST'>
Surname: <input type=text name='lid_voornaam' value='".$row['lid_voornaam']."'><br/>
Name: <input type=text name='lid_naam' value='".$row['lid_naam']."'><br/>
Email: <input type=text name='lid_email' value='".$row['lid_email']."'><br/>
<input type='submit' value='Whatever' id='test1'/>
</form>";
}
and
$("form").submit(function(event){
var id = $(this).attr('id').split('target')[1];
alert('form ' +id+ ' clicked');
event.preventDefault();
});