JavaScript制御のフォームを1ページに複数設置するには？

質問

先日こちらのサイトで、1つのセレクトボックスで1度に複数の情報をCGIに渡す方法を教えて頂き、

<script type="text/javascript">
<!--
function func() {
var n = document.F1.S1.selectedIndex;
var d = document.F1.S1.options[n].text.split(" ");
document.H1.AA1.value=d[1].slice(0,-1);
document.H1.AA2.value=d[0];
document.H1.AA3.value=document.F1.T1.value;
document.H1.submit();
}
// -->
</script>
<form name="F1" action="#">
<select name="S1">
<option>3本セット 100円
<option>7本セット 200円
</select>
<input type="button" value="カートへ" onclick="func()">
</form>

<form name="H1" action="cart.cgi">
<input type="hidden" name="AA1">
　・
　・
<input type="hidden" name="AA3">
</form>

というフォームを作ったのですが、同じページに同様のフォームがもう一つ必要になりました。
そこで上記ソースに、フォーム名や変数名を変えたScript

<script type="text/javascript">
<!--
function func() {
var n = document.F2.S2.selectedIndex;
var d = document.F2.S2.options[n].text.split(" ");
document.H2.AA4.value=d[1].slice(0,-1);
document.H2.AA5.value=d[0];
document.H2.AA6.value=document.F2.T2.value;
document.H2.submit();
}
// -->
</script>

を追加し、
これに対応するフォームも追加したのですが、1つめのフォームから「カートへ」でデータを送っても2つめのフォームの内容が送信されてしまいます。
どこをどう直したらよいのでしょうか？

回答No.2

hidebu- · ベストアンサー

＞このソースって、1つめのJavaScriptでは1つめのフォームの内容のみ、2つめのJavaScriptでは2つめのフォームの内容しか扱っていませんよね？
いえ、この内容だと、（ブラウザの実装にもよりますが）後のfuncをよびだしてしまいます。

つまり、どちらのsubmitボタンをクリックしても後者のほうしかよばれません。

ですので、ひとつめとふたつめの関数名をかえてしまいましょう
(func()の箇所)

javascriptの２つめのfuncのところをfunc2に
function func2() {
～
}

２つめのフォームHTMLのfuncのところをfunc2にかえてみてください。
<input type="button" value="カートへ" onclick="func2()">

これで、それぞれ違う関数がよびだされるはずです。

お礼

度々どうもありがとうございます。
やっぱりド素人でした。onclick="func()"の「func」っていじって良いと知らなかったもので・・・。おはずかしいです。
おかげさまで解決しました。
どうもお世話になりました！

回答No.1

hidebu-

function func() {
～
}

の中にすべてのロジックをいれていませんか？

お礼

早速のお返事をどうもありがとうございます。
質問文では文字数制限の関係ですべてのソースが書けなかったので補足欄をお借りして書かせて頂きますが、このソースって、1つめのJavaScriptでは1つめのフォームの内容のみ、2つめのJavaScriptでは2つめのフォームの内容しか扱っていませんよね？
私は本当に見よう見まねだけでJavaScriptに手を出している素人なので、慣れていらっしゃる方の目では一目で「ほら、やっぱり。ここ。」とおっしゃるような部分を見落としているかもしれませんが・・・

補足

これが、問題を抱えている部分を全部抜き出したソースです。
これで、「品目1」の「7本セット」をカートに入れたはずが「品目2」の「普通セット」（そのとき2つめのフォームで選択状態になっている値）がカートに入ってしまうのです。

<script type="text/javascript">
<!--
function func() {
var n = document.F1.S1.selectedIndex;
var d = document.F1.S1.options[n].text.split(" ");
document.H1.AA1.value=d[1].slice(0,-1);
document.H1.AA2.value=d[0];
document.H1.AA3.value=document.F1.T1.value;
document.H1.submit();
}
// -->
</script>

<form name="F1" action="#">
<select name="S1">
<option>3本セット 100円
<option>7本セット 200円
</select>
<input type="hidden" name="T1" value="品目1">
<input type="button" value="カートへ" onclick="func()">
</form>

<form name="H1" action="cart.cgi">
<input type="hidden" name="AA1">
<input type="hidden" name="AA1">
<input type="hidden" name="AA3">
</form>

<script type="text/javascript">
<!--
function func() {
var n = document.F2.S2.selectedIndex;
var d = document.F2.S2.options[n].text.split(" ");
document.H2.AA4.value=d[1].slice(0,-1);
document.H2.AA5.value=d[0];
document.H2.AA6.value=document.F2.T2.value;
document.H2.submit();
}
// -->
</script>

<form name="F2" action="#">
<select name="S2">
<option>普通セット 100円
<option>特別セット 200円
</select>
<input type="hidden" name="T2" value="品目2">
<input type="button" value="カートへ" onclick="func()">
</form>

<form name="H1" action="cart.cgi">
<input type="hidden" name="AA4">
<input type="hidden" name="AA5">
<input type="hidden" name="AA6">
</form>