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.