using jquery to show successfull form submission

Question

i have the following javascript file named coupon.js -

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

        });

        return true;
    });

});

sms.php -

<?php
//process form
$res = "message deliverd";
$arr = array( 'content' => $res );
echo json_encode( $arr );//end sms processing
unset ($_POST);
?>

i am calling like this -

    <form id="smsform" class="appnitro"  method="post" action="sms.php"> 
... 
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>
</form>
<div id="content"></div>

Now i expected that after a successful form submission the div "content" would show the message without any page refresh. But instead the page redirects to /sms.php and then outputs -

{"content":"message deliverd"}

Please tell where i am going wrong. My javascript is correct . No error shown by firebug. Or please tell some other method to acheive the reqd. functionality.

Even this coupon.js is not working-

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

        });

e.preventDefault();
    });

});

Not working even if i add return fasle at end. Please suggest some other method to acheive this functionality

Answer 1

The reason why the page is refreshing is because the submit event wasn't suppressed.

There are two ways to do this:

• Accept an event object as a parameter to the event handler, then call preventDefault() on it.
• return false from the event handler.

Answer to your revised question: You are accepting the e parameter in the wrong function, you should accept it in the submit handler, not the ready handler.

Answer 2

I believe you need to cancel the form submission in your jquery. From the jQuery documentation:

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:

So in your code:

//add 'e' or some other handler to the function call   
 jQuery(document).ready(function(e){
            jQuery('.appnitro').submit( function() { $.ajax({
                url     : $(this).attr('action'),
                type    : $(this).attr('method'),
                dataType: 'json',
                data    : $(this).serialize(),
                success : function( data ) {
                            for(var id in data) {
                                jQuery('#' + id).html( data[id] );
                            }
                          }

            });
            //return false
            return false;

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

    });