0

これは私を狂気に駆り立てています。何時間ものグーグルとRTFM'ingも役に立ちませんでした。複数の div にまたがるフォームを専門家がどのように処理するかを知る必要があります。私の最初の選択は、そのようにすべての div の周りにフォームを置き、それから祈りに頼ることでした:

コード ( JSfiddle ):

<div class='A'>
   <form id='fooForm' method='post' action='foo.php'>
      <div class='B1'>
         ...
      </div>
      <div class='B2'>
         <div class='B2-1'>
            ...
         </div>
         <div class='B2-2'>
            ...
         </div>
      </div>
   </form>
</div>

しかし、これによりすべてがまとまってしまいます

結果： ここに画像の説明を入力

代わりに、フォームをダミーフォームに移動し、後で値を更新してjquery.submit、次のようにアプローチを使用することにしました。

コード ( JSfiddle ):

<div class='A'>
   <div class='B1'>
      ...
   </div>
   <div class='B2'>
      <div class='B2-1'>
         ...
      </div>
      <div class='B2-2'>
         ...
      </div>
      ... 
   </div>
</div>
<form id='fooForm' method='post' action='foo.php'>
</form>

これは今、私が見たいように見えます

結果： ここに画像の説明を入力

inputしかし今は、ダミーと要素を作成しselect、ユーザーが変更を加えるたびにそれらの値を更新するか、最後にform.submit. post()フォームの機能をシミュレートするためにjQuery のメソッドを使用することは可能でしょうか? フォームが自動的に値をパッケージ化してサーバーに送信するという利点があることは理解していますが、制限が厳しすぎます。

4

2 に答える 2

1

はい、可能です。 $.post() で送信できます。厳密に言えば、フォーム要素さえ必要ありません。正しいデータ オブジェクトを関数に渡すだけです。

それでも適切なフォームを使用する場合は、最初の jquery serialize メソッドを使用して入力から値を取得できます。http://api.jquery.com/serialize/

于 2012-11-07T07:12:02.877 に答える
0

構造化に関しては、HTMLリストを使用してフォーム内のすべてを構造化してください。

<form id="form1" >
<ul>
<li><input /></li>
<li><select></li>
</ul>
</form>

次に、すべてのフォーム要素をサーバーに送信するjquery ajaxを使用して、フォームのシリアル化を使用してフォームを送信します。

そしてあなたのページの使用の更新を防ぐためにevent.preventDefault()

コード：

$('#submit').on("click",function(event) {
event.preventDefault( );
$.post("url",$('#form-id').serialize( ),function(data){}); }
}
于 2012-11-07T08:42:01.430 に答える