ajaxSubmit and response

I'm trying to work with an ajaxSubmit event so the form is replaced with the result. That result could be a confirmation page or errors on the form. This form works on it's own page, so I'm working on putting it in an ajax modal.

<div id="biography">
    <form method="post" action="/{{ onesheet.url }}/contact/" id="contact-form" class="full">
        {% csrf_token %}
        <ul>
        {{ form.as_ul }}
        </ul>
        <input type="submit" value="Send Email">
    </form>
</div>

And the js

<script type="text/javascript">
    $('#contact-form').submit(function() { 
        var options = { 
            target:        '#biography',   // target element(s) to be updated with server response 
            beforeSubmit:  showRequest,  // pre-submit callback 
            success:       showResponse  // post-submit callback 
        };
        // submit the form 
        $(this).ajaxSubmit(options);
        // return false to prevent normal browser submit and page navigation 
        return false; 
    });
</script>

But this isn't loading the response in teh target. it's opening it in t开发者_开发问答he entire page.

Any ideas?

You need to call e.preventDefault() in order to prevent the normal submit:

<script type="text/javascript">
$('#contact-form').submit(function(e) { 
    e.preventDefault();
    var options = { 
        target:        '#biography',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    };
    // submit the form 
    $(this).ajaxSubmit(options);
    // return false to prevent normal browser submit and page navigation 
    return false; 
});
</script>