Form 共通の部品

Question

複数のフォームがあり とあるテキストボックスが共通の場合、
form 属性は複数指定していいのでしょうか？

JS で 送信前に わざわざ値取得して同じにしなければいけませんか？

Answer 1

テキストボックスはフォームの子要素です。
このため、復数のフォームにまたがるテキストボックスというのは、おかしいと考えたほうが良いです。
また、formの子要素にformをおくのも、やはりおかしいです。
例えば、methodが異なった場合、どちらが採用されるか想像しづらいですよね。
なので、

JS で 送信前に わざわざ値取得して同じにしなければいけませんか？

という考え方が正しいです。
共通のフォームと個別のフォームを設置して、
個別のフォームの送信時に、共通フォームをマージするとかですね。

Answer 2

フォームは１個を送信したら違うページに飛んでしまいその他のデータが消えてしまいます。
大きいの１つのフォームにまとめるかJavascriptで処理をするか、どっちがいい？
JSだったらここから始めちゃったらいい。
どんなsubmitを押しても全インプットをまとめて送ります。

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  //console.log( $( "input, textarea, select" ).serialize() );
  $.post('server.php', $( "input, textarea, select" ).serialize());
});

Comments

[pac894398]

ご回答いただきありがとうございます。
SCRIPT5009: '$' is undefined　というエラーが出ています。

[sounisi5011]

このコードにはjQueryというライブラリが必要です。
「'$' is undefined」というエラーは、jQueryで使用する`$`という変数が存在しないというエラーです。

ただ、フォームの構造によっては、このコードは改良が必要でしょう。
送信先がserver.phpに、送信形式がPOSTに固定されてしまっています。
また、全てのform要素の入力内容をserver.phpに送るようにできています。
そのまま使用することはできないと思います。