今メールフォームを作っています。
チェックボックスにチェックしたら、テキストフィールドに記入しないと、
エラーがでる様にJavascriptでチェックをかけたいのですが教えて頂けませんでしょうか。
下記のようなフォームにしたいです。
■フォーム
これをあなたは何処で知りましたか?
チェックボックス1 新聞
チェックボックス2 テレビ
チェックボックス3 その他
テキストフィールド その他を選んだ方は記入して下さい。
このチェックボックスは必須にして、
チェックボックス1~3までのどれかをチェックしないとアラートを表示したいです。
また、チェックボックス3を選択したのにテキストフィールドに入力していない場合も
アラートを表示したいです。
上記のalertは送信ボタン<input name="submit" type="submit" value="情報を送信する">
を押した際に出したいです。
この様なチェックボックスのグループを同じフォームに2つ作りたいです。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
・ 以下のコードを参考にしてみてください。
------------------------------------------------------------
<script type="text/javascript">
<!--
function checkRadio() {
var flag;
var f=document.getElementById('f1');
for (var j=1 ; j<=2 ; j++) {
flag = false;
var chbName = "chb" + j;
for (var i=0 ; i<f[chbName].length ; i++) {
if (f[chbName][i].checked) flag = true;
}
if (!flag) {
alert(chbName + ": エラー");
return false;
}
if (f[chbName][f[chbName].length-1].checked && f['other'+j].value.replace(/\s/g,"")=="") {
alert(chbName + ": その他エラー");
return false;
}
}
return true;
}
//-->
</script>
<form id="f1" action="">
<table border="border" cellpadding="5" align="center">
<tr>
<td><div style="background-color: #eee">これをあなたは何処で知りましたか?
</div>
<input type="checkbox" name="chb1" value="np">新聞<br>
<input type="checkbox" name="chb1" value="tel">テレビ<br>
<input type="checkbox" name="chb1" value="other">その他<br />
その他を選んだ方は記入して下さい。<br />
<input type="text" name="other1"></td>
</tr>
<tr>
<td><div style="background-color: #eee">これをあなたは何処で知りましたか2?
</div>
<input type="checkbox" name="chb2" value="ff">Firefox2<br>
<input type="checkbox" name="chb2" value="ie">IE2<br>
<input type="checkbox" name="chb2" value="other">その他2<br />
その他2を選んだ方は記入して下さい。<br />
<input type="text" name="other2"></td>
</tr>
<tr>
<td><input name="submit" type="submit" value="情報を送信する" onclick="return checkRadio();"></td>
</tr>
</table>
</form>
No.2
- 回答日時:
この場合、新聞・テレビ・その他は同じグループなので、思い切って
同じ名前で管理してしまうという手があります。
そうすればこんな感じでチェックできるでしょう
<script>
function check(f){
var know=f.elements["know[]"];
var flg=false;
for(var i=0;i<know.length;i++){
if(know[i].checked){
flg=true;
break;
}
}
alert(flg)
}
</script>
<form>
<input type="checkbox" name="know[]" value="newspaper">新聞
<input type="checkbox" name="know[]" value="tv">テレビ
<input type="checkbox" name="know[]" value="other">その他
<input type="button" value="check" onclick="check(this.form)">
</form>
No.1
- 回答日時:
タグの disabled 属性を操作したら良いんじゃない?
http://www.tohoho-web.com/html/input.htm
http://www.tohoho-web.com/js/form.htm
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) アクセスで、androidのスマホサイズのフォームは作れますか?テキストとチェックボックスだけのフォ 1 2023/05/31 00:53
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Access(アクセス) Accessで予定表を作成しようとしてます。 テーブル フィールド名 連番 オートナンバー型 年月日 2 2023/07/23 11:40
- Access(アクセス) チェックボックスにチェックが入った後の挙動 1 2022/08/21 12:39
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- Excel(エクセル) スプレッドシートのチェックボックスとフィルタを連携させたい 2 2022/09/26 18:02
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- Excel(エクセル) 表内で、Enterキーで横→行の最後入力したら次の行の先頭に移動するマクロを作りたい 3 2022/05/01 21:19
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
チェックボックスの設定
-
チェックボックスが複数ある場...
-
ラジオボタンの選択でチェック...
-
form の checkbox の配列 name ...
-
【jsp/Java】チェックボックス...
-
EclipseでSpringを使用し、テー...
-
複数のチェックボックス項目が...
-
背景色を変えて未入力チェック...
-
チェックボックスに全てチェッ...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
-
<form action="#">の意味とは?
-
jQuery セレクトボックスで選択...
-
フォームが空欄の時にフォーム...
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
-
javascriptの値をformのinput h...
-
正規表現で複数マッチ条件で悩...
-
マイナスなら赤字で表示したい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
チェックボックスのON/OFFに応...
-
複数のチェックボックス項目が...
-
checkboxをクリックしてリロー...
-
チェックボックスの設定
-
チェックボックスで指定したも...
-
フォームのチェックボックスの...
-
チェックボックス
-
配列のチェックボックスをjavas...
-
一つのチェックボックスのON/OF...
-
チェックボックスが複数ある場...
-
スクリプト内でチェックボック...
-
特定のID(またはクラス)で括ら...
-
チェックボックスに連動するテ...
-
<input type="checkbox" checke...
-
チェックボックスに全てチェッ...
-
Nameは配列で、チェックされた...
-
EclipseでSpringを使用し、テー...
-
チェックボックスとラジオボタ...
おすすめ情報