Cant send values after hiding div - php

Question

<div id = "result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
This will hide my div where the submit is, whenever click on submit it wont send values to PHP.
How to fix that to make it send the values to PHP so i will get the values from html?

Answer 1

You have this e.preventDefault(); in your jquery click handler function. It means that when you press the submit button, the form wouldn't be submitted. It's simply preventing original action of that selector on click.
Here's how to fix it. Use ajax. There's many jquery functions for that, i will show you how to use $.ajax method.
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "yourphpscriphere.php",
data: "name=" + $('input[name="name"]').val(),
success: function() {
alert('thank you for using my form');
},
error: function() {
alert('an error happened during the request');
}
});
$('#hideme').hide();
$('#result').fadeIn(5000);
});
Remember to change url to your own. Then you can get your radio button value using $_POST['name'] in php.

Answer 2

try this code :
html:
<div id="result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST" id="eform">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
jQuery :
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
$.post("page.php",$("#eform").serialize(),function(data){
$('#hideme').hide();
$('#result').html(data).fadeIn(5000);
})
});
});