Html5 양식 제출시 브라우저/페이지 새로 고침이 발생하지 않습니다.

Question

제 문제는 다음과 같습니다. 동영상이 재생되고 끝에 가까운 형태로 표시됩니다. 양식이 제출되면 해당 비디오를 숨기고()() 다른 두 개의 div가 포함 된 다른 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); 
}); 

다음 양식을 제출 시도 아약스 요청으로 페이지가 다시로드되지 않습니다.

는 http://api.jquery.com/event.preventDefault/ 및