停止瀏覽器/頁面刷新Html5表單提交

Question

我的問題是這樣的：我有一個視頻播放和呈現附近的形式。提交表單時，我觸發該視頻以隱藏（）並顯示（）另一個包含2個視頻的div。該部分工作正常，但在表單發佈後刷新頁面，我們又回到了原點。

我嘗試了其他帖子中找到的方法，但無濟於事。 這裏是形式：

<form id="contactForm" action="salesforce.com address obscured" method="POST"> 
     <input type=hidden name="oid" value="00D40000000Mvel"> 
     <input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="FIRST NAME" /><br> 
     <input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="LAST NAME" /><br> 
     <input id="email" maxlength="80" name="email" size="20" type="text" placeholder="EMAIL" /><br> 
     <input id="zip" maxlength="20" name="zip" size="20" type="text" placeholder="ZIP CODE" /><br> 
     <button type='submit' class="submit-button" >GET STARTED!</button> 
    </form> 

和我的jQuery減去我使用嘗試和防止刷新的代碼提交：

var mainVid = $("#video") 
    var secVid = $("#secVid"); 
    $("#videoForm button").on("click", function(event) { 
    mainVid.hide(400); 
    secVid.show(400); 
    }); 

Answer 1

嘗試

$('#contactForm').on('submit', function (event) { 
    event.preventDefault(); 
    $.post("your url", $(this).serialize()); 

    mainVid.hide(400); 
    secVid.show(400); 
}); 

然後提交表單與ajax請求和頁面不重新加載。

見http://api.jquery.com/event.preventDefault/和http://api.jquery.com/jQuery.post/