停止浏览器/页面刷新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/