Form AJAX Processing

I use AJAX approach handling inputs from user. In my test code simplified from production code, there is a table with two cells. First cell has a form in it and the second cell has a button in it. OnClick is used to specify the javascript function. Every time when the button is clicked, a table of parts is shown 100%. When I click the Submit button, it just seems to executing the test code again. It doesn't even show the message I added for testing. I have to admit I don't know form much. I'm not very sure I coded the onclick() parameter the right way. I think the problem is in using the form the correct way. Can you help me to isolate the problem? Thanks,



The table code:

<table>
</tbody>
<tr>
<td>
<form method="post"
<p align="left"><input type="text" name="myPart"></p>
<input type="submit" value="Search" onclick="Doit($myPart)" />
</td>
<td>
<input type="image" src="image.jpg" alt="Part" onclick="Doit('HP')"/>
</td>
</tr>
</tbody>
</table>


The Javascript code is:

<script type="text/javascript">
var http = getHTTPObject();

function Doit(sId)
{
var url="getData.php?id="; // getData.php writes data back
http.open("GET", url+escape(sId), true);
http.onreadystatechange=handleHttpResponse;
http.send(null);
/*
for (i=0; i<10; i++)
document.write("Is it working?");
*/
}


function getHTTPObject()
{
........
}

function handleHttpResponse()
{
.......
}

</script>



Warren