如何在不重新加载页面的情况下提交表单和更新颜色框 [英] How to submit form and update colorbox without reloading page

问题描述

这是以下方面的后续行动: jQuery更改颜色框的内容

this is a follow up to: jQuery change content of colorbox

现在，初始颜色框(test_2.html)的内容是一种简单的形式: 例如

Now the content of the initial colorbox (test_2.html) is a simple form: For e.g.

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

应该发送表格，并将test_3.html的内容加载到同一颜色框中.

The form should be sent, and the content of test_3.html should be loaded into the same colorbox.

推荐答案

如果将其添加到主页的docReady中，它应该处理所有事情:

If you add this to the docReady of your main page, it should take care of everything:

$('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中设置的页面打开颜色框.顺便说一句，您可能想对其进行调整，但是它使您对如何完成此操作有了一个想法.

This code makes a few assumptions, though. One of which is that this sends the data to "processForm.php" (as you can see), and expects the answer "ok" (in plain text, no json) when everything works out. If you don't care about the response, or about dealing with errors, then you could just remove the if-else block and open colorbox with the page you set in action. Anway, you'll probably want to tweak this, but it gives you an idea of how it can be done.

这篇关于如何在不重新加载页面的情况下提交表单和更新颜色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！