0

私は単にフォームの送信を遅らせて、単なるフォームの送信ではなく、アクションが行われているという感覚をユーザーに提供しようとしています。以下にリンクされているjsfiddleは、私がやろうとしていることを正確に示しています（メッセージを提供したいクライアントで行われているアクションを除いて）。

一言で言えば、フォームの送信をN秒遅らせる方法としてsetTimeoutを使用することを考えました。

// 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);

ここでわかるように、「submiting...」メッセージと実際のフォーム送信トリガーをsetTimeout内にラップしています。これはすべて、より大きな$("#theForm").submit()ラッパー内にあります。

これは完全に失敗する（ハングする）か、フォームが通過するがPOSTが失敗するある種の疑似「部分送信」を実行します。

私はこのアイデアと結婚していません...ユーザーエクスペリエンスの利益のためにフォームの送信を数秒間遅らせる別の方法がある場合は、知りたいです。

http://jsfiddle.net/t4tqy/

テストされたブラウザ：WindowsでのChrome、IE 8、FF12...これが私がATMにアクセスできるすべてです。

4

1 に答える 1

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/

于 2012-06-08T16:05:51.747 に答える