Post form with Ajax and jQuery

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

What "tab"? test.php is your target script. – bdl Dec 27 '10 at 15:26 — bdl, Dec 27 '10 at 15:26

score 2 · Answer 1 · answered Dec 27 '10 at 15:27

2

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);
        }
        });
    }); 
});

answered Dec 27 '10 at 15:27

brildum

1,759
2
15
22

But this will show the $_POST in my index.html. What I want is to open test.php and render the result there. – Andrej Dec 27 '10 at 15:31

score 1 · Answer 2 · answered Dec 27 '10 at 15:29

Try this.

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

score 0 · Accepted Answer · answered Dec 27 '10 at 15:27

0

I believe you're looking for the success in the .ajax options parameter.

$.ajax({
  ...
  success: function(d){
    alert(d);
  }
});

answered Dec 27 '10 at 15:27

Brad Christie

100,477
16
156
200

But this will show just an alert message. What I want is to open test.php and render the result there. – Andrej Dec 27 '10 at 15:33
I think you're missing the point of AJAX then. If you're looking for the window to open, AJAX is not you're bet. AJAX is used for a "seamless integration", perform duties without leaving the page. For what you're trying to do I recommend using the default form action (and maybe adding a `target="_blank"` so it submits in a new window. – Brad Christie Dec 27 '10 at 15:35
Alright, good. Got confused by the way you worded it. Now, just bind it to an element (like `
`) and place the results there using something like `$('#myElement').html(d);` (in place of the alert). – Brad Christie Dec 27 '10 at 15:36

Post form with Ajax and jQuery

3 Answers3

Linked