2つのHTMLフォームで1つの非表示フィールドを共有するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/1213840

質問

2つのフォームと両方のフォームの外側にある非表示フィールドがあるページがあります。

非表示フィールドは、どのフォームで送信できますか？

jQueryでこのようなことをすることを考えました：

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            // do something to move or copy the
            // hidden field to the submitting form
        });
    });
</script>

これは機能しますか？他のアイデアはありますか？

編集

非表示フィールドには、変更されないシリアル化されたオブジェクトグラフが格納されます。両方のサーバーメソッドにオブジェクトが必要です。シリアル化されたオブジェクト文字列はかなり大きくなる可能性があるため、サーバーから2回送信されることは望ましくありません。

役に立ちましたか？

解決

送信する直前に、各フォームに要素のコピーを挿入するだけです。 このようにして、他のフィールドに影響を与えることなく、非表示のフォームフィールドごとに異なる情報を持つオプションを使用できます。

次のようなもの：

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $("#hidden_element").clone().appendTo(this);
        });
    });
</script>

新しいコピーを作成せずに両方のフォームにまったく同じ要素を使用する場合は、clone()

を使用しないでください。

clone（）および appendTo（）

編集：

フォームが送信するすべてのリクエストで非表示の要素を送信したくない場合。その期間、そのユーザーのデータベースに保存することを検討してください。そのコンテンツを1回送信できます。ページをリロードするたびに1回だけ送信して、非表示要素のデータベースIDを各フォームポストで送信するだけです。

ページの読み込み時、次のようなもの：

$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
  $("#hiddenfield").val(insertedID);
});

次に、サーバー側のコード：

//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit

これにより、jsがコールバックを取得します。

これで、フォームを送信できますが、今回は、サーバーにID（整数番号）のみを送信します。 その後、サーバーからオブジェクトを削除するだけです（X時間後にcronを実行するか、別のリクエストを送信して削除します。

正直なところ、オブジェクトがHUGE（!!）でない限り、一度送信するだけで保存するのは、サーバーに2つのリクエストを送信するよりも実行がはるかに複雑だと思います。

他に質問がある場合は教えてください...

他のヒント

HTML5では、<！> quot; form <！> quot;を含めることができます。入力要素を持つ属性。フォーム属性の値は、フィールドが属するフォームのIDです。フィールドを複数のフォームに含めるには、すべてのフォームIDをスペース区切りリストに含めます。残念ながら、フォーム属性はIEではまったくサポートされていません（IE 9以降）。 FFとChromeのサポートは、それぞれバージョン4と10で始まります。

ページの読み込み時に両方のフォームにフィールドを追加します：

$(function() {
    $('#form1, #form2').append($('input[name=fieldName]'));
});

非ajax送信を行うと仮定すると、送信されるフォームにフィールドを追加するだけで済みます。ただし、両方の形式でこの情報が必要な場合は、この値サーバー側をセッションストアに保存することをお勧めします。これにより、非jsクライアントも機能します！

 $(function() {
        $('form').submit(function() {
             $('input.yourhiddenSubmit').appendTo(this);
        });
    });

次のフォームに変数を渡す唯一の方法は、AJAXを使用する場合を除き、フォームの送信時に渡されるデータにその変数を含めることです（GETまたはPOST）。 <！> quot;正当な理由<！> quot;のために実際のフォームの外に隠し変数を持ちたいと仮定すると、jQueryを使用して送信の直前に隠し入力フィールドをフォームに含めることをお勧めします：

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
            return true;
        });
    });
</script>

<！> quot; hiddenField <！> quot;のすべてのインスタンスを置き換えます。フォーム外の非表示フィールドのIDを使用します。これにより、ページの別の場所にある非表示フィールドの値で送信される直前に、フォーム内に新しい入力が作成されます。

それを超えて、あなたの正確な問題が何であったか（そしてなぜこのフィールドがフォームに含まれていないのか）について、もう少し具体的に話さなければなりません。

上記のコードは理論的には機能するはずですが、実際に自分でテストする機会はありませんでした。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top