On submit, load a html popup file into a div

Issue

I am trying to redirect to a contact form on submit to a HTML file which I have made using.

header('Location: /dev/thanks.html');

However, this loads it to a different page and not to the page that I'm already on.

I already have the jQuery to make a popup for the contact form and information page, which is:

$('a.contact , a.contact_footer, a.contact_text').click(function() {
    $("html, body").animate({ scrollTop: 0 }, 600);
    $("#popup").load("/dev/contact.php");
    // Getting the variable's value from a link
    var show = $('#popup').css('display', 'block'),
    popup = $(this).attr('href');

    //Fade in the Popup and add close button
    $(popup).fadeIn(300);
    
    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);
    
    return false;

On submitting the contact form, I want to load a new file (thanks.html) to replace the popup (contact form) with a thank-you message. Similar to what I'm doing with the jQuery already, but I want it to only implement on submit:

<div class="submit">
    <input type="submit" value="Submit"/>
</div>

What do I need to do to modify my jQuery so it implements on submit instead of on click?

Solution

Add the submit event to the contact form:

If you use jQuery 1.7+, use on:

$(document).on("submit", "form#submit_message", function() { 
    $('#popup').load('/dev/thanks.html'); 
    return false; 
});

If not, use live (or upgrade your jQuery version):

//live is old deprecated
$('form#submit_message').live('submit', function() {
    $('#popup').load('/dev/thanks.html');
    return false;
});

Answered By - falsarella