radio button data to ajax - php

Question

Hi i'm printing out a radio button list dynamically with php using the following code:
<form method="post">
<p>Name of list:
<label for="name"></label>
<input type="text" name="name" id="name">
</p>
<p>Name of item:
<input id="first_name" name="first_name" type="text" />
<br />
<?php echo $form;?>
<input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();"></form>
where $form is the variable in which the radio button list is saved.Now i need to pass the selected radio button to an another php file using an ajax function ajax_post().But since my form method is POST my ajax function gets overridden and doesnt get called.
heres my ajax function
function ajax_post(){
var hr = new XMLHttpRequest();
var id = '<?php echo $id; ?>';
var rd = '<?php echo $_POST['radio'];?>';
var url = "my_parse_file.php";
var fn = document.getElementById("first_name").value;
var nm = document.getElementById("name").value;
var vars = "todo="+fn+"&name="+nm+"&id="+id+"&rd="+rd;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(vars); // Actually execute the request
}
I need it to be POST because i want to extract what radio button i press and i also need the ajax function to work...any way around this?

Answer 1

You need to return false; from your function to avoid the form getting submitted the regular way.