returning data from a remote php script

Question

I am using php/ajax to submit a form without page refresh. Here are my files-

coupon.js

jQuery(document).ready(function(){
        jQuery(".appnitro").submit( function(e) {
$.ajax({
            url     : "sms.php",
            type    : "post",
            dataType: "json",
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }

        });
//return false or
e.preventDefault();

    });

});

sms.php

    <?php
    //process form
$res = "Message successfully delivered";
    $arr = array( 'mess' => $res );
    echo json_encode( $arr );//end sms processing
    unset ($_POST);
    ?>

and here is code for my html page -

<form id="smsform" class="appnitro" action="sms.php" method="post">
...
</form>
<div id="mess" style="background:green;"></div>

Now instead of submitting form through ajax without page refreshing what is happening is that page gets redirected to

baseurl/sms.php and the only thing visible on page is

{"mess":"Message successfully delivered"}

My guess is that php script is not returning back successfully to the jquery and hence the echo in last part of sms.php is getting displayed. How should i make the php script return successfully? ANY IDEAS HOW TO DEBUG THIS.I HAVE TRIED USING return false at the end of coupon.js but no results.

When i click on submit firebug gives following results -

POST http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php

404 Not Found 1.29s   `jquery.min.js (line 130)`

Response

Firebug needs to POST to the server to get this information for url:
http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php

This second POST can interfere with some sites. If you want to send the POST again, open a new tab in Firefox, use URL 'about:config', set boolean value 'extensions.firebug.allowDoublePost' to true
This value is reset every time you restart Firefox This problem will disappear when https://bugzilla.mozilla.org/show_bug.cgi?id=430155 is shipped

Answer 1

If you're being redirected to sms.php instead of doing an ajax call, it probably means that there's something wrong with your jQuery code, probably the event binding itself.

I'm not sure without testing it, but shouldn't that code be:

$(document).ready(function(){
        $(".appnitro").submit( function(e) {
$.ajax({
...

?

Check the javascript console, either in Firefox/Firebug or Chrome-IE/Developer Tools. Does it show any errors in those lines?

Answer 2

@Fanis It's irrelevant whether he uses '$' or 'jQuery', they are synonyms.

@Ayush As Fanis says, you should try Firebug if you don't use it already. I've checked the example at my server, works OK, and I don't know what's the problem at Your side.

You can use onsubmit="return false" to disable form submission:

<form id="..." class="..." ... onsubmit="return false">

Also check if javascript is enabled, for example do "alert('something')" at $(document).ready

Edit:

// instead of  
url: "sms.php"
// try
url: "/~kunal17/devbuzzr/wp-content/themes/street/sms.php"
// although I don't really know if it will help

Answer 3

Fanis and Michal Kluczka are probably right about the issue with event binding , I tried your code myself as well, and it works for me.

Put an alert('X') as the first statements in your jQuery(document).ready() and jQuery(".appnitro").submit() functions and see if both are displayed (first one upon document load, second one upon form submission).

One more thing: I suggest you include a

header('Content-Type: application/json');

into your sms.php file before printing your JSON data to protect against cross-site-scripting (XSS) attacks. See also Don’t serve JSON as text/html for details.