ページ内の幾つかのformを1つの送信で送りたい

質問

初心者です。現在お店のホームページを作っているのですが、問合せのページでなかなかうまくいきません。すみませんがお知恵をお貸しください。

まず概要からいいますと、
商品上、複数の商品を一度に注文頂く事が多く、それを１ページにまとめたいと思っています。、
フォームは各商品を選べば、それに対応する項目が表示されます。
これを3つほどページ内に、同じ内容のものを設置し、1つの送信ボタンで送れないかと考えています。

そこで
<script language="JavaScript" type="text/JavaScript">
<!--

function productA(sel) {
var target = sel.value;
var group = sel.form.getElementsByTagName("FIELDSET");
var i=0, fs;
while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none";
}

function productB(sel) {
var target = sel.value;
var group = sel.form.getElementsByTagName("FIELDSET");
var i=0, fs;
while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none";
}
//-->
</script>

として
<boby>
<form name="form1" method="post" action="cgi-bin/formmail.cgi">
商品選択１<br>
<select name="select1" onChange="productA(this)">
<option value="--" selected class="style9"> </option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<fieldset id="A">
■Ａの質問：
<select name="q1A" size="1">
<option value="--" selected class="style9"> </option>
<option value="q1A_1" >q1_1</option>
<option value="q1A_2" >q1_2</option>
</select>
</form>

<form name="form1" method="post" action="cgi-bin/formmail.cgi">
商品選択2<br>
<select name="select1" onChange="productB(this)">
<option value="--" selected class="style9"> </option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<fieldset id="B">
■Bの質問：
<select name="q1B" size="1">
<option value="--" selected class="style9"> </option>
<option value="q1B_1" >q1B_1</option>
<option value="q1B_2" >q1B_2</option>
</select>
</form>
<INPUT TYPE="submit" VALUE="送　　信">

という状況です。
<form>を分けている理由は1つのformにしてしまうと、商品選択1を記載し、
次の商品選択２がある場合、そこで別の商品を選択すると、先ほど記載した、
商品選択１がリセットされ、項目も別の商品の内容になってしまいます。
その為、formを分けている状態です。この状態では勝手にリセットはされませんが、
ただし、送信できません・・・

なので、この状態で送信できる方法はありませんか？
もしくはformを１つにしてもいいので、その際各formで商品選択をしても、
リセットされない方法があれば教えてください。

本当に初心者なので、出来ない事をいっているのかもしれません。
大変お恥ずかしいご質問ですが、何卒ご教授頂ければ助かります。

回答No.3

shockatz

サーバサイドの実装を抜きにしては語れない問題なので、何とも言えないのですが、
基本的には、
■フォームからの送信であれば、フォームを１つに束ねる
■物理的にフォームが分離している場合は各フォームの内容を、「仮想的に」１フォームに束ね送信する
ということになります。

■１フォームの場合
この場合、「商品」と「属性」のnameを、配列で定義します。
<fieldset>
<select name="item[0]"><option..></option></select>
<select name="attribute[0]"><option..></option></select>
</fieldset>
..以降繰返し
（サーバサイドがphpの場合には、配列添字はなくても自動的に処理されます）

「商品」が変更された場合、「属性」の設定可能値値を変更するjavascriptは、「同じfieldsetに属するattribute[x]」をターゲットにします。

■個別フォームの場合
別に１つの送信用フォームを作成し、商品ごとのhiddenな項目を作って、個別フォームの値を入れ、送信します。
自分は項目メンテが面倒くさいので、jQueryのserialize()で、文字列にまとめてしまいます。

jQuery serialize
http://jquery-master.net/ajax/serialize.php

jQueryであれば、送信時に「臨時に」フォームを作って送信することもできるので、serialize文字列を"&"で連結すれば仮フォームも、hidden項目も不要になります。

処理内容のためにHTMLコードを歪曲するのはＮＧです。
フォームは「見栄え良く、入力しやすく」することが第一で、送信形式はサーバが理解できれば何でもよいのです。

回答No.2

ORUKA1951

異なるformにある内容は送信できません。
また、送信データがnameが同じでない限り消えることはありません。次のフォームを作成する時にhiddenで引き継ぐか、cookieに保存しておけばよいです。
　あなたの場合、cookieを使ってバスケットに入れていく方法がもっとも良いでしょう。確認画面などではinput type="hidden"で引き継ぎましょう。

回答No.1

itu1989

1つのsubmitで送れるのは1つのformの情報です。

他のformの情報を一緒に送る事は出来ないので送る場合は非表示の隠し項目(display:noneやinput type="hidden")を用意してsubmit時にコピーします

・フォームA,フォームBがある時、フォームAのsubmit時にフォームBの項目をフォームAの隠し項目へコピーする

後、質問中の「商品選択1を記載し、次の商品選択２がある場合、そこで別の商品を選択すると、先ほど記載した、商品選択１がリセットされ、項目も別の商品の内容になってしまいます。」の意味がよくわかりませんでした。
記載と言うのは画面に表示されてる状態の事ですか？項目が入力された事ですか？
また、「リセット」や「別の商品の内容になってしまいます」と言うのはどう言う事ですか？質問中のソースからは表示・非表示のjavascriptしか読み取れません。選択値の初期化やデータの入れ替えなどはありませんよね？

補足

ご回答ありがとうございます。

まず質問の件ですが、説明がうまくなくてすみません。
例でご説明しますと、

例えば商品が
野菜
肉
魚
とあったとします。

まずご注文商品1のリストボックスから
【野菜】を選ぶとその商品の質問項目
注文の野菜は？
数量は？
などという項目がでます。それに入力してもらいます。

次に肉も注文したいので、
ご注文商品2のセレクトボックスから
肉を選びます。
そうすると肉の項目
注文する肉の種類は？
何キロ？
というのが出てきますが、
この時、商品１で選択した野菜の項目も商品２も肉の項目に変わってしまいます。もちろん入力情報は消えてしまいます。

これはフォームを1つにまとめるとこの様な現象が出てしまいます。
ので、ご注文商品毎にformで分けているという状況です。
そうすると上記の様な現象が出ないので・・・
この説明で分かるでしょうか・・・・
これがなくなれば1つformでもいいのですが、その仕方が分かりません。

ちなみに
フォームA,フォームBがある時、フォームAのsubmit時にフォームBの項目をフォームAの隠し項目へコピーする
というのはどうしたら出来るのでしょうか？

本当に無知ですみません・・・