如何在不重新加载页面的情况下提交表单并更新colorbox

Question

这是关于以下问题的跟进： jQuery更改colorbox内容 现在，初始colorbox（test_2.html）的内容是一个简单的表单，例如：

<form id="foo" action="test_3.html">
    <imput type="submit" id="formInput" value="send form">
</form>

表单应该被发送，并且test_3.html的内容应该被加载到同一个colorbox中。

- saromba

---

如果下面的答案解决了您的问题（听起来是这样的），请不要忘记将其标记为已接受的答案。 - James Skemp

Answer 1

如果您将以下内容添加到主页面的docReady中，它应该可以解决所有问题：

$('form').live('submit', function(e){
    var successHref = this.action,
        errorHref = "formError.php";

    e.preventDefault();
    $('#cboxLoadingGraphic').fadeIn();
    $.ajax({
        type: "POST",
        url: "processForm.php",
        data: {someData: $("#someData").val()},
        success: function(response) {
            if(response=="ok") {
                console.log("response: "+response);
                $.colorbox({
                    open:true,
                    href: successHref   
                });
            } else {
                $.colorbox({
                    open:true,
                    href: errorHref
                });
            }
        },
        dataType: "html"
    });

    return false;
});

这段代码有一些假设。其中一个是将数据发送到“processForm.php”（如你所见），并期望在一切顺利时得到“ok”的答案（纯文本，无json）。如果你不关心响应或处理错误，那么可以删除if-else块并用在action中设置的页面打开colorbox。总之，你可能想要调整它，但这给了你一个实现的思路。

- uɥƃnɐʌuop