Question

我只是想延迟表单提交，并向用户提供一些操作正在发生的感觉，而不仅仅是即时表单提交。下面链接的jsfiddle显示了我正在尝试做的事情（减去客户端中我想要提供消息的动作）。

简而言之，我想使用setTimeout作为延迟表单提交N秒的方法，例如

// display message indicating we're doing something
$("#container").html("<p>Processing...</p>");

setTimeout(function () {
    // display message indicating we're ready to submit the form
    $("#container").html("<p>Submitting...</p>");
    // trigger form submit action
    form.submit();
    return true; // needed?
}, 2000);

正如你在这里看到的那样，我将在setTimeout中包装“submitting ...”消息和实际的表单提交触发器。这都在一个更大的$("#theForm").submit()包装器中。

这要么彻底失败（挂起），要么执行某种伪“部分提交”，表单会通过但是POST失败。

我没有嫁给这个想法...如果有另一种延迟表单的方法提交几秒钟以获得用户体验，我想知道。

http://jsfiddle.net/t4tqy/

浏览器测试：Windows下的Chrome，IE 8，FF 12 ......这是我可以访问ATM的全部内容。

Answer 1

尽管你为什么要引起延迟而不是消除任何发生的事情......

使用：

<div id="formMessage"></div>
<div id="formContainer">

和

#formMessage {
    display: none;
}

添加/编辑：

$("#formContainer").hide();
$("#formMessage").html("Processing...").show();

....

$("#formMessage").html("Submitting....");

正如在这个（公认的环形交叉）演示中一样，在您尝试提交之前，您不会从form元素中删除#formContainer。

http://jsfiddle.net/userdude/t4tqy/1/

现在，我可能会建议一些改进，例如使用缓存而不是对同一元素选择器的多次调用等。另外，您也可以仅在需要时创建#formMessage元素，而不是没有必要您的来源中的标记。

$(function () {
    var $email = $("#emailAddr"),
        $form = $("#emailForm"),
        $container = $('#formContainer'),
        $message = $('<div id="formMessage">');

    $email.val('bogus.user@email.cc');

    $form.submit(function (ev) {
        ev.preventDefault();

        var form = this,
            ea = $email.val(),
            allowSubmit = false;

        // cheap email validation
        if (ea.length !== 0 && ea.indexOf("@") !== -1) {
            allowSubmit = true;
        }

        if (allowSubmit === true) {
            // indicate action of some sort
            $container.hide().before($message);
            $message.html("Processing...").show();

            setTimeout(function () {
                // indicate we're submitting form
                $message.html("Submitting...");
                // engage
                form.submit();
                return true;
            }, 2000);

        } else {
            alert("form not ok, not allowing submission...");
        }  
    });
});

http://jsfiddle.net/userdude/t4tqy/3/

使用setTimer表单提交延迟

1 个答案: