如何提交表單，並無需重新加載頁面

Question

更新

顏色框，這是一個後續行動： jQuery change content of colorbox

現在初始顏色框（test_2.html）的內容是一個簡單的形式： 對於例如

<form id="foo" action="test_3.html"> 
    <imput type="submit" id="formInput" value="send form"> 
</form> 

表單應該被髮送，並且test_3.html的內容應該被加載到同一個colorbox中。

Answer 1

如果您添加到您的主頁的docReady，應該照顧一切：

$('form').live('submit', function(e){ 
    var successHref = this.action, 
     errorHref = "formError.php"; 

    e.preventDefault(); 
    $('#cboxLoadingGraphic').fadeIn(); 
    $.ajax({ 
     type: "POST", 
     url: "processForm.php", 
     data: {someData: $("#someData").val()}, 
     success: function(response) { 
      if(response=="ok") { 
       console.log("response: "+response); 
       $.colorbox({ 
        open:true, 
        href: successHref 
       }); 
      } else { 
       $.colorbox({ 
        open:true, 
        href: errorHref 
       }); 
      } 
     }, 
     dataType: "html" 
    }); 

    return false; 
}); 

這段代碼的幾個假設，雖然。其中之一是，這將數據發送到「processForm.php」（正如你所看到的），並期望當一切正常時，回答「ok」（純文本，無json）。如果您不關心響應或處理錯誤，那麼您可以刪除if-else塊，並打開您在action中設置的頁面的彩色框。 Anway，你可能想要調整這個，但它讓你知道如何完成。