2011-07-15 27 views
0

我正在嘗試使用ajaxSubmit事件,以便將表單替換爲結果。該結果可能是確認頁面或表單上的錯誤。這個表單在它自己的頁面上工作,所以我正在把它放在ajax模式中。ajax提交和回覆

<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> 

而且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> 

但這不是加載在格蘭目標的響應。它會在整個頁面中打開它。

任何想法?

+0

我不完全理解當你提交時發生的情況。它會轉到頁面「/ {{onesheet.url}}/contact /」嗎?你是否贊同它留在同一頁面?是ajaxSubmit的工作? – Marthin

+0

你可以添加你的js函數「showRequest」和「showResponse」的代碼嗎? –

回答

1

你需要調用e.preventDefault(),以防止正常提交:

<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>