checkboxとselectメニューの連動およびalertの出し方
メールフォームを利用し、簡単なショッピングフォームを作成しているのですが、壁にぶち当たりましたので、恐縮しておりますが、はじめて質問させて頂きます。よろしくお願い致します。
function setTF(cOBJ,fName1,fName2)
{
document.myFORM[fName1].disabled = !cOBJ.checked;
document.myFORM[fName2].disabled = !cOBJ.checked;
}
function delWarn(obj)
{
if(obj.checked)
{
var cf = confirm( '数量も必ずご入力ください' );
if(cf)
obj.checked = true;
else
obj.checked = false;
}
}
----
<form action="~test.cgi" method="post" name="myFORM">
<INPUT type="checkbox" name="item1" value="商品1" onClick="setTF(this,'item1kazu','service1'),delWarn(this)">商品1
<SELECT name="item1kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="(1本)">1</OPTION>
<OPTION value="(2本)">2</OPTION>
<OPTION value="(3本)">3</OPTION>
</SELECT>本<br>
<INPUT type="checkbox" name="item2" value="商品2" onClick="setTF(this,'item2kazu'),delWarn(this)">商品2
<SELECT name="item2kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="(1本)">1</OPTION>
<OPTION value="(2本)">2</OPTION>
<OPTION value="(3本)">3</OPTION>
</SELECT>個<br>
<INPUT type="checkbox" name="item3" value="商品3" onClick="setTF(this,'item3kazu'),delWarn(this)">商品3
<SELECT name="item3kazu" disabled>
<OPTION value="">数量</OPTION>
<OPTION value="(1本)">1</OPTION>
<OPTION value="(2本)">2</OPTION>
<OPTION value="(3本)">3</OPTION>
</SELECT>セット<br>
<p><INPUT type="checkbox" name="service1" value="サービス1" disabled>サービス1</p>
<input type="submit" name="sendBtn" value="内容確認画面へ">
</FORM>
内容は、
商品1、2、3にそれぞれチェックボックスをおき、それを選択したらそれぞれ数量の選択(selectメニュー)がはじめて出来る様になる。さらにサービス1は商品1を選択するとチェック可能になるというものです。ここまでは順調に実現できました。
問題は、商品を選択した時のみ数量の選択を必須にしたい、という所です。
使用予定のcgiでは、入力必須項目に設定すると、商品の選択をしていない数量部分もおのずと必須になり具合が悪いため、
javascriptのalertを利用し上手く制御できやしないかと、ない頭をひねって、現在の状況で止まってしまいました...。
現状、商品1をクリックすると「数量も必ずご入力下さい」というalertがでて、数量選択がアクティブに。ただし、商品2、商品3はalertが出ません。
また、もしこれが実現可能になったとしても商品ごとにalertが表示され、うっとおしいのはさることながら、あくまでも意識づけで入力必須ではないため、もっと良い方法はないか、是非ご教授願いたいと思っております。
理想としては、商品にチェックしたもののみ数量選択を必須とする、
→sbmitを押した際、「数量を選択して下さい」というalertを表示。
が実現できればと願っております。
(チェックboxなしで数量のみでやればカンタンなのでしょうが、今回はこちらの構成でいきたいと思っております...)
どなたか是非アドバイス頂ければ幸いです、よろしくお願い致します。
お礼
お答えいただきありがとうございます。 お答え頂いた上に差出がましいお願いなのですが、 お手数なのですが、サンプルソース記載していただければ幸いです。 お手数ですが、宜しくお願いいたします。