forms - Stop browser/page refresh on Html5 Form Submission

Question

My problem is this: I have a video that plays and presents a form near the end. When the form is submitted I trigger that video to hide() and show() another div that contains 2 more videos. that part is working fine, but after the form posts it refreshes the page and we're back to square one.

I tried the methods found in other posts but to no avail. Here is the Form:

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

and my jQuery minus the code i was using to try and prevent refresh on submit:

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

Answer 1

Try

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

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

Then the form is submitted with an ajax request and the page is not reloaded.

See http://api.jquery.com/event.preventDefault/ and http://api.jquery.com/jQuery.post/