Post form with Ajax and jQuery - php

Question

Start learning Ajax (and jQuery), I encounter the issue with post form data, which I could not resolve myself.
First, here is the simple example where I collect data, post it, and displayed it on a new page:
<!-- index.html -->
<form id="myForm" action="test.php" method="post">
<input type="checkbox" id="ch1" name="Ch1" value="1">Check Box 1 <br />
<input type="checkbox" id="ch2" name="Ch2" value="2">Check Box 2 <br />
<input type="submit" id="myButton" />
</form>
<?php
// test.php
print_r($_POST);
?>
Then I tried with Ajax and jQuery. I slightly modified the form pasted above:
<!-- index.html -->
<form id="myForm">
<input type="checkbox" id="ch1" name="Ch1" value="1">Check Box 1 <br />
<input type="checkbox" id="ch2" name="Ch2" value="2">Check Box 2 <br />
<input type="button" id="myButton" value="Submit"/>
</form>
And here is the jQuery function:
// script.js
$(document).ready(function () {
$("#myButton").click(function () {
$.ajax({
cache: false,
type: 'POST',
url: 'test.php',
data: $("#myForm").serialize()
});
});
});
My question is, how to reimplement the jQuery function to echo the result in the test.php tab? I crawled the many resources, but i didn't find any solution.
Thanks in advance for any pointer.
Best, Andrej

Answer 1

You're going to need a success callback, which I'll assume will be some HTML...
$(document).ready(function(){
$("#myButton").click(function() {
$.ajax({
cache: false,
type: 'POST',
url: 'test.php',
data: $("#myForm").serialize(),
success: function(response) {
$("#someElement").html(response);
}
});
});
});

Answer 2

Try this.
$(document).ready(function(){
$("#myButton").click(function() {
$.ajax({
cache: false,
type: 'POST',
url: 'test.php',
data: $("#myForm").serialize(),
success: function(data){
alert(data);
}
});
});
});

Answer 3

I believe you're looking for the success in the .ajax options parameter.
$.ajax({
...
success: function(d){
alert(d);
}
});