8

1 ページに 4 つのフォームがあります。フォームをネストできないことは知っています。

<form id="form1"></form>

<form id="form2"></form>

<form id="form3"></form>

<form id="form4"></form>

という順番で紹介。

フォーム 1 とフォーム 4 は、処理のために同じ php ページに投稿します。フォーム 1 には 1 つの入力フィールドがあり、フォーム 4 には複数のフィールド、チェックボックス、および選択項目があります。

フォーム 1 またはフォーム 4 の両方が両方のフォームの結合フィールドを送信するための最良の方法は何ですか?

jQuery を試してみましたが、テキスト入力とチェックボックスにはうまく機能しますが、Select では機能しません。フォーム 1 とフォーム 4 を結合し、css を使用してフォーム 1 の位置を変更しようとしましたが、正しいレイアウトを取得できません。

これを行うためのより簡単なものはありますか？

4

2 に答える 2

11

不可能です。serialize()またはメソッドを使用serializeArray()してフォームのデータを取得し、Ajax を使用してサーバーに送信できます。

一連のフォーム要素を送信用の文字列としてエンコードします。

$('#send').click(function() {
   var firstFormData  = $('form:eq(0)').serializeArray();
   var fourthFormData = $('form:eq(3)').serializeArray();
   $.ajax({
        url  : '...',
        type : 'post',
        data : firstFormData.concat(fourthFormData)
   }).done(function() {
       // ...
   });
});
于 2012-07-07T08:02:52.117 に答える
0

さて、フォーム4のチェックボックス配列で.serialize()を動作させることができませんでした。

<input type="checkbox" id="model[]">

チェックされた値を取得しようとしましたが、他の入力と一緒にシリアル化することができませんでした:

var vals = []
    $('input:checkbox[name="model[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

だから私は戻って、より簡単なことをしました：

form1 を削除し、テキスト入力と送信ボタン<div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div>を form4 内に移動しました。

<div id="placeholder" style="position:relative;"></div>form1 があった form2 と 3 の上にプレースホルダーを置きます。

上に JavaScript を配置します。

$(document).ready(function(){
    $("#searchbox")
    .appendTo("#placeholder");
});

テキスト入力と送信ボタンを移動して、プレースホルダー div に対して絶対的および相対的に配置します。

このようにして、それらを 1 つの形式に縮小し (これが目的です)、データを操作するために JavaScript に依存せず、両方の形式でタンデム シリアライゼーションを実行する必要もありません。

于 2012-07-08T05:00:11.367 に答える