18

テキストフィールドの配列を持つフォームがあります。ユーザーは（javascriptを介して）任意の数のテキストフィールドをフォームに追加できます。フォームを送信して戻るボタンを押すと、フォームは最初にレンダリングされたときに元のフォームにあったフィールドのみで表示されます（追加されたテキストフィールドはすべて失われます）。ユーザーがフォームを送信したときの状態で戻るボタンを使用できるようにするための最良の方法は何ですか？どんなアイデアでも大歓迎です。私が試したいくつかのことは次のとおりです。

  • フォームデータをCookieに入れます（これはいくつかの理由でうまく機能しませんが、私にとって最大のキラーは、Cookieのサイズが4Kに制限されていることです）
  • フォームデータをセッションに入れる
  • AJAXを介してフォームを送信し、履歴を管理します

助けてくれてありがとう。私のウェブサイトhttp://fishtale.org/formtest/f1.phpにテストフォームを投稿しました。また、ここに私が言及した振る舞いを示す簡単なフォームがあります：

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

これは、私がしばらく前に投稿した質問「戻るボタンでフォームデータを残すための最良の方法」に似ていますが、このフォームの要素はユーザーによって変更されます。

4

6 に答える 6

15

追加する追加フ​​ィールドとその値のエンコードされたリストを格納する<input type="hidden">（フォームなしまたはフォーム外にあるため、送信されない）を作成するのはどうですか？nameブラウザは「戻る」に新しく追加されたフィールドを記憶しませんが、最初からフォームにあった非表示のフィールドの値を記憶します。

ドキュメントのアンロード時に追加のフィールドを保存し、準備ができたときにそれらを取得する例を次に示します。

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

ノート：

  • 送信の値を記憶するためだけに必要な場合は、form.onsubmit代わりに使用できます。一部のブラウザは、そのイベントが発生する前に古いフォーム値をすでに保存しているため、機能しません。window.onbeforeunloadonunload

  • Firefoxでは、非表示の入力の位置が重要です。何らかの理由で、動的に追加されたフィールドの下に配置すると、Firefoxはそれがどの入力であるかについて混乱し、値を記憶できなくなります。

  • この例はOperaでは機能しません。Operaで動作させることはできますが、それは面倒です。Operaによるロードイベントとアンロードイベントの呼び出しには一貫性がないため、代わりにonsubmitを使用するか、ポーリング間隔などで非表示フィールドを設定する必要があります。さらに悪いことに、Operaが以前のフォームフィールドの値を記憶している場合、onloadが起動するまで実際には入力されません。これにより、すでに多くのフォームスクリプトの問題が発生しています。Operaとの互換性が必要な場合は、onloadに小さなタイムアウトを設定して、フォームの値が入力されるまで待機することで、この問題を回避できます。

于 2009-11-16T12:12:38.753 に答える
11

このための事前に作成されたライブラリは見つかりませんが、以前に解決されたと確信しています。自分でやらなければならない場合は、次のアプローチを取ります。

  1. コマンドパターンを使用して、コントロールを追加することでページのUIを変更する各メソッドが、AJAXメソッドを呼び出して、呼び出されたメソッド（テキストのJavascript表現）をサーバーのセッションに格納されているキューにプッシュするようにします。

  2. body onLoadが完了したら、AJAXメソッドを使用して、ユーザーがいるページのコマンドキューについてサーバーのセッションを照会します。1つが取得された場合eval、キューの各メンバーだけが、ユーザーが行ったのと同じ順序でページのUIを再構築します。

このアプローチでは、コントロールの追加だけでなく、削除も記録していることに注意してください。テキストボックスなどのユーザー入力コントロールには、個別の状態ホルダーが必要になります（AJAXメソッドアクセスを使用したサーバー側セッションも必要になる可能性があります）。

于 2009-11-12T19:37:15.890 に答える
7

優れたブラウザでは、壊れないようにするだけで完全に機能させることができます。

Firefox 1.5は、単一のブラウザセッションで、JavaScriptの状態を含むWebページ全体にメモリ内キャッシュを使用します。訪問したページ間を前後に移動する場合、ページを読み込む必要はなく、JavaScriptの状態が保持されます。ソース

これはOperaとWebKitでもサポートされています。ただし、DOMキャッシュは、次のルールに固執する場合にのみ可能です。

  1. onunload、を使用しないでくださいonbeforeunload。

  2. Cache-control: no-storeまたはを使用しないでくださいmust-revalidate。PHPでは、 （私は彼らがそれを綴っていると思います）からに
    変更する必要があります。 session.cache_limiterpatently_ridiculousnocachenone

    session_cache_limiter('none');
  3. 残念ながら、HTTPSも出ています。

ブラウザにページのリロードを強制しない場合、ブラウザはリロードしません。RFC 2616が示唆しているように、DOMとその値は変更されません。

ただし、データを隠しておく場所を探している場合は、信じられないほど巧妙なハックがあります。window.nameはメガバイトのデータを格納できます。サーバーに送信されず、ウィンドウ間で共有されません。

Flash Cookieもあり、HTML5localStorageはIE8とSafari4に実装されています。

于 2009-11-19T23:16:24.877 に答える
0

ステップ2：フォームを処理するスクリプトは、入力された値を配列に入れ、その配列をセッション変数（またはtext / db /適切と思われるもの）に格納します。

ステップ1：フォームを出力するスクリプトは、そのセッション変数が見つかった場合にjavascriptを追加します（これにより、フォームに入力されます）（また、セッション変数もクリアされます）。

于 2009-11-22T22:49:48.563 に答える
-3

Webページの上部に独自の戻るボタンを作成し、標準のWebブラウザの戻るボタンよりも大きくてきれいにすることができます。

内部的には、コードは以前の状態を認識して元に戻すことができます。以前の状態がなかった場合は、ブラウザーの戻る関数を呼び出すことができますか？

于 2009-11-12T19:31:56.367 に答える
-3

戻るボタンの使用をブロックします。戻るボタンが押されたら、新しいフィールドが含まれているユーザーの前のページを、それが理にかなっている場合は視覚的に、または非表示にして再レンダリングします。そうすれば、ユーザーは通常どおり戻るボタンを使用でき、「前の」ページの外観を完全に制御できます。

特定のユースケースでは、すべてのフィールドが表示され、送信された値が入力されたページをレンダリングする必要があります。

これは、ユーザーが入力する一連のフォームを提供し、ユーザーが前のフォームに戻ることを選択できる、ウィザードタイプのプロセスに適したパターンです。

完全に明確にするために、onUnloadイベントのキャプチャでこのアドバイスを使用して、フォームの送信をトリガーし（入力された値を取得できるように）、「戻る」と表示された前のページを（値なしで）再レンダリングすることをお勧めします。 。唯一の代替手段は、ユーザーがフィールドを離れるたびにAjaxを使用して入力された値を送信し、すべてのページでAJAXを介してサーバーに確認し、表示する追加の値を取得することです。

戻るボタンの機能を制御し、アンロードイベントを使用してフォームデータを永続化する方法について説明している追加のページを次に示します。

于 2009-11-19T11:28:31.130 に答える