メールフォームを利用し、簡単なショッピングフォームを作成しているのですが、壁にぶち当たりましたので、恐縮しておりますが、はじめて質問させて頂きます。よろしくお願い致します。
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なしで数量のみでやればカンタンなのでしょうが、今回はこちらの構成でいきたいと思っております...)
どなたか是非アドバイス頂ければ幸いです、よろしくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
No3 です。
以下の部分、作成中のゴミが入っていました。
以下のように修正してください。
(結果は同じなので修正しなくても動作しますが無駄なので)
document.myFORM[arguments[1]].disabled = !(cOBJ.checked);
↓
document.myFORM[fName].disabled = !(cOBJ.checked);
No.2
- 回答日時:
こんな感じでどうでしょうか。
<script>
function setTF(cOBJ, fName) {
document.myFORM[cOBJ.name + 'kazu'].disabled = !(cOBJ.checked);
// 第2引数が存在する場合は実行する
if(fName != undefined) {
document.myFORM[arguments[1]].disabled = !(cOBJ.checked);
}
}
// フォームのチェック
function check() {
var form = document.myFORM;
// フォームをループする
for(var i = 0; i < form.length; i++) {
// タイプがチェックボックスで且つ name が 'service1' でなかったら
if(form[i].type == 'checkbox' && form[i].name != 'service1') {
// チェックされていたら
if(form[i].checked) {
var select = document.getElementsByName(form[i].name + 'kazu')[0];
// 未選択の場合は
if(select.selectedIndex == 0) {
// アラートの表示とフォーカスを与えて return false
alert('数量も必ずご入力ください');
select.focus();
return false;
}
}
}
}
return true;
}
</script>
<form action="~test.cgi" method="post" name="myFORM">
<input type="checkbox" name="item1" value="商品1" onclick="setTF(this, 'service1');">商品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);">商品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);">商品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="内容確認画面へ" onclick="return check();">
</form>
No.1
- 回答日時:
以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>sample</title>
<script type="text/javascript">
function setTF(cOBJ,fName1,fName2) {
document.myFORM[fName1].disabled = !cOBJ.checked;
if (document.myFORM[fName1].disabled) document.myFORM[fName1].selectedIndex = 0;
if (fName2) document.myFORM[fName2].disabled = !cOBJ.checked;
}
function checkWarn(f) {
var ss="";
if (f.item1.checked && f.item1kazu.value=="") {
ss += "商品1 ";
}
if (f.item2.checked && f.item2kazu.value=="") {
ss += "商品2 ";
}
if (f.item3.checked && f.item3kazu.value=="") {
ss += "商品3 ";
}
if (ss !="" ) {
alert(ss + "の数量を選択して下さい。");
return false;
} else {
return true;
}
}
function setBoxNum(e) {
var boxNum = setTarget();
}
</script>
</head>
<body>
<form action="test.cgi" method="post" name="myFORM">
<INPUT type="checkbox" name="item1" value="商品1" onClick="setTF(this,'item1kazu','service1');">商品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');">商品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');">商品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" onclick="return checkWarn(this.form);" value="内容確認画面へ">
</FORM>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
クリックの度に加算していくには?
-
hiddenのvalueの値を変えたい
-
セレクトボックスの初期選択状...
-
value内に変数を入れたい
-
テキストボックスに入力された...
-
javascriptにてHTMLのhiddenエ...
-
3桁区切りのカンマをつけたい...
-
name属性が同じフォームが複数...
-
VB.NET DateTimeの型について
-
jsで、配列内の文章を改行する...
-
クイズ作成:15個の問題から5個...
-
sessionStorageを調べています。
-
フォームに入力された数値を計...
-
ラジオボタンとテキストを同時...
-
CDOMailで本文テキストの文字コ...
-
javascriptでhiddenに二次元配...
-
Java Script の "this"
-
複数のsubmitボタンで押された...
-
ホームページビルダーのスクリ...
-
関数名などの固有名詞(?)を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
hiddenのvalueの値を変えたい
-
value内に変数を入れたい
-
引数に数値、文字列の混在
-
複数のsubmitボタンで押された...
-
VB.NET DateTimeの型について
-
3桁区切りのカンマをつけたい...
-
javascriptでhiddenに二次元配...
-
フォームで入力した値を別のフ...
-
setIntervalの間隔を途中で変更...
-
jsで、配列内の文章を改行する...
-
Pythonで会員サイトの自動ログ...
-
selectboxのoptionタグのvalue...
-
テキストボックスに入力された...
-
フォーカスすると初期値が消去...
-
ラジオボタンと連動して文字列...
-
セレクトボックスの初期選択状...
-
sessionStorageを調べています。
-
VBAをJavaScriptに変換したいです
-
ダミーフォームの内容を送信用...
-
javascriptで複数の計算を同時...
おすすめ情報