using jquery to show successfull form submission
<p>i have the following javascript file named coupon.js - </p>

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

});
</code></pre>

<p>sms.php -</p>

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

<p>i am calling like this - </p>

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

<p><strong>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 -</strong> </p>

<pre><code>{"content":"message deliverd"}
</code></pre>

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

<p>Even this coupon.js is not working-</p>

<pre><code>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();
    });

});
</code></pre>

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