Question

我正在尝试重定向到提交到我使用的HTML文件的联系表单。

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

然而，这会将其加载到不同的页面而不是我已经在的页面。

我已经有了jQuery来为联系表单和信息页面制作一个弹出窗口，它是：

$('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;

在提交联系表单时，我想加载一个新文件（thanks.html），用感谢信息替换弹出窗口（联系表单）。类似于我正在使用jQquery，但我希望它只在submit上实现：

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

我需要做些什么来修改我的jQuery，以便它在提交时实现而不是点击？

Answer 1

将提交事件添加到联系表单：

如果您使用jQuery 1.7+，请使用on：

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

如果没有，请使用live（或升级您的jQuery版本）：

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

Answer 2

我假设表单将直接附加在“#popup”中，而不必更改“var popup ...”行。

$("#popup").on("submit", "form", function(event){
    var popup = $(this).parent();
    var data = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "my_url.php",
        data: data
    }).done(function(html){
        popup.html(html);
    });
    return false;
});

在提交时，将html弹出文件加载到div中

2 个答案: