![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
ショッピングカートの商品注文ページでセレクトメニューの「選択してください」の部分でをJavascriptによるエラーチェックしたいのですが、過去の掲示板を見たら応用できるコードを見つけましたが、現在当方が使用しているショッピングカートCGI(WEB寺小屋)に応用したいと思っています。
JS部分のif(f.o.selectedIndex == 0)の「o」の部分を「o-カラー」で指定すると(日本語)スクリプトが正常に作動しないのですが、どうしてもCGI側での仕様は変更したくないし、改造もできないので、この部分を日本語指定できる解決策をご存知でしたら教えてください。
↓問題なく動作確認
------------------------------------------------------
【JS部分】
function kakunin(f)
{
if(f.o.selectedIndex == 0)
{
alert("カラーを選択してください");
return;
}
}
【HTML部分】
<form name="test">
<SELECT NAME="o">
<option selected>カラーを選択</option>
<OPTION>赤色
<OPTION>青色
<option>黄色</option>
</SELECT>
<INPUT TYPE="button" VALUE="OK" onClick="kakunin(test)">
</form>
--------------------------------------------------------------
↓問題の部分認
------------------------------------------------------
【JS部分】
function kakunin(f)
{
if(f.o-カラー.selectedIndex == 0)
{
alert("カラーを選択してください");
return;
}
}
【HTML部分】
<form name="test" method="post" action="test.cgi">
<select name="o-カラー">
<option value="" selected>選択</option>
<option value="レッド_0">レッド</option>
<option value="ブルー_0">ブルー</option>
<option value="イエロー_0">イエロー</option>
</select>
<input type="submit" value="カートに入れる" onClick="kakunin(test)">
<input type="hidden" name="mode" value="regist">
--------------------------------------------------------------
No.1ベストアンサー
- 回答日時:
function kakunin(f) {
if(f.elements[0].selectedIndex == 0)//変更
//elements[0]はフォームの中の0番目の項目である事を指します。
//他にも項目がある場合は合わせて数値を変更してください。
{
alert("カラーを選択してください");
return false;//変更 falseを返してエラーの場合は送信中止
}
return true;//追加 エラーがなければ続行
}
他に、
<input type="submit">のonClickは削除し、
<from>にonsubmitを追加します。(エラーの場合に送信を中止させる為)
<form ~ onsubmit="return kakunin(test)">
この回答への補足
丁寧な回答ありがとうございます。エラー表示についてはパーフェクト解決しました。
補足でもう一点解決できないことがあります。
カート部分のソースを全て下記に示しますが、カートチェックした場合に、エラー表示の「カラーを選択して下さい。」のOKクリック後にカートに追加されてしまします。上記のOnclick部分も削除して<form ~ onsubmit="return kakunin(test)">を追加しましたが、解決不能です。
申し訳ございませんが、わかれば教えていただけないでしょうか?
よろしくお願いします。
---------------------------------------------------------------
変更したJS部分
function kakunin(f)
{
if(f.elements[0].selectedIndex == 0)//変更
//elements[0]はフォームの中の0番目の項目である事を指します。
//他にも項目がある場合は合わせて数値を変更してください。
{
alert("カラーを選択してください");
return;
}
}
----------------------------------------------------------------
変更したHTML部分
<form name="test" method="post" action="test.cgi" onsubmit="return kakunin(test)"><!--Form Start-->
<select name="o-カラー">
<option value="" selected>選択</option>
<option value="レッド_0">レッド</option>
<option value="ブルー_0">ブルー</option>
<option value="イエロー_0">イエロー</option>
</select>
<!--A表示:数量選択枠がない場合?個限定:複数はValue値変更-->
<input type="hidden" name="amount-個" value="1">
<!--A表示:カートに入れるボタン-->
<input type="submit" value="カートに入れる">
<!--A非表示:商品番号↓-->
<input type="hidden" name="id" value="X-1001">
<!--A非表示:商品名↓-->
<input type="hidden" name="goods" value="商品名">
<!--A非表示:価格↓-->
<input type="hidden" name="unit" value="1500">
<!--A非表示:画像↓-->
<input type="hidden" name="gazou" value="a_t.gif">
<!--A非表示:商品説明↓-->
<input type="hidden" name="setumei" value="商品説明">
<!--A非表示:固定タグで必ず入れる-->
<input type="hidden" name="mode" value="regist">
</form><!--Form Finish-->
非情に解りやすい回答ありがとうございました。JAVAによるエラー表示チェック方法は解決しました。Javaもいろいろと奥が深いです。
なお、解決しましたが、一点補足説明で質問させていただきましたが、お解かりになれば、お時間があるときで結構ですのでご回答をお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
selectを変更不可にしたい
-
3つのselectでURLパラメータを...
-
同じ名前のセレクトがある場合...
-
ラジオボタンの選択に応じてプ...
-
プルダウンの値によって活性・...
-
javascriptでセレクトボックス...
-
3つの連動したプルダウンメニュ...
-
ラジオボタンとプルダウンを連...
-
VBScriptでHTMLのセレクトボッ...
-
selectで選ばれた値を別ページ...
-
javascriptでoptionタグを削除...
-
2つのプルダウンメニューで、同...
-
JavaScriptの質問です。どなた...
-
Selectボックスの一覧表示方法
-
select要素のvalueを配列で取得...
-
セレクトボタンで特定の項目で...
-
今日の日付を自動的にセレクト...
-
ラジオボタンの値が取得できな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
連想配列を使ってコンボボック...
おすすめ情報