CODEWITHSUNDEEP
phpjqueryajaxformspost
Andrej
Andrej

Reputation: 3839

Post form with Ajax and jQuery

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

Upvotes: 0

Views: 3386

Answers (3)

Dejan Marjanović
Dejan Marjanović

Reputation: 19380

Try this.

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

Upvotes: 1

brildum
brildum

Reputation: 1799

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

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101604

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

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

Upvotes: 0

Related Questions