こんにちは・・・。
前回はphpで同じ質問をしたのですが、今回はjavascriptを使わなくてはなりません・・・OTL
重複質問のようで申し訳ないのですが、
連絡先方法【必須】をラジオボタンで選択した際、選択した項目(テキストエリア)を必須にしたいのです。
連絡先方法を必須にするやり方はわかりますが、それ以降がわかりません。。
どなたかご教授願います!!
<input type="radio" name="renraku" value="TEL">TEL
<input type="radio" name="renraku" value="FAX">FAX
<input type="radio" name="renraku" value="E-Mail">E-Mail
function CheckInput(){
/*----- check -----*/
flag = 0;
for ( i = 0 ; i < document.form_1.renraku.length ; i++){
if (document.form_1.renraku[i].checked){ flag = 1; }
}
if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
}
この続きを教えて下さい・・・お願い致します!
No.3ベストアンサー
- 回答日時:
記述のほう、<select>と間違えてました^^;
#2の方の回答でいいと思いますが、
チェックボックスは選択されているがテキストエリアに入力はされていない
というときのメッセージを変えられるようにしてみました。
<form name="form_1" onsubmit="return CheckInput(this);"><!--要素は好きに配置-->
<input type="radio" name="renraku" value="TEL">TEL
<input type="radio" name="renraku" value="FAX">FAX
<input type="radio" name="renraku" value="E-Mail">E-Mail
<textarea id="tTEL"></textarea>
<textarea id="tFAX"></textarea>
<textarea id="tE-Mail"></textarea></form>
function CheckInput(f){
var v,flag = 0;
for ( i = 0 ; i < f.renraku.length ; i++){
if (f.renraku[i].checked){flag = 1;
v=document.getElementById("t"+f.renraku[i].value).value;}
}
if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
if(!v){
alert('御希望連絡先を入力して下さい');return false;
}
return true;
}
この方法で出来ました!!
本当に、本当に、ありがとうございました~!!
もう少し、基礎から学ぼうと思います・・・。
ご丁寧にありがとうございました!
No.2
- 回答日時:
微妙にちがうかもしれませんが、こんなんでどうでしょう?
<script>
function CheckInput(f){
var flag = true;
for(var i=0;i<f.length;i++){
if (f[i].type=="radio" && f[i].name=="renraku" && f[i].checked){
flag = false;
var v=f[i].value;
}
}
if(v!="")
for(var i=0;i<f.length;i++){
if(f[i].type=="textarea" && f[i].name=="t"+v){
if(f[i].value=="") flag=true;
}
}
if(flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
}
</script>
<form>
<input type="radio" name="renraku" value="TEL" id="renraku0"><label for="renraku0">TEL</label>
<input type="radio" name="renraku" value="FAX" id="renraku1"><label for="renraku1">FAX</label>
<input type="radio" name="renraku" value="E-Mail" id="renraku2"><label for="renraku2">E-Mail</label><br>
TEL:<br>
<textarea name="tTEL"></textarea><br>
FAX:<br>
<textarea name="tFAX"></textarea><br>
E-Mail:<br>
<textarea name="tE-Mail"></textarea>
<input type="submit" value="go!" onClick="return CheckInput(this.form)">
</form>
ありがとうございます♪
label要素、初めて知りました・・・。
使わせていただきます!!
今回はNO.2さんを参考にさせていただきましたが、こちらの方法も試して見ます♪
ご丁寧にありがとうございました!
No.1
- 回答日時:
<textarea id="tTEL"></textarea>
<textarea id="tFAX"></textarea>
<textarea id="tE-Mail"></textarea>
のようにテキストエリアを追加して、スクリプト部を以下のように追加。
//前略
if (!flag){
alert('御希望連絡方法を選択して下さい');
return false;
}
//ここから追加(returnがあるのでelseは省略してみました)
if(!document.getElementById("t"+document.form_1.renraku.value).value){
//必須のテキストエリアが空欄の場合の処理
}
//ここまで追加
ラジオボタンのvalueの値によって、空欄チェックをするオブジェクトを選んでいます。
ありがとうございます!!
が・・・動きませんでした・・・。
テキストエリアが空欄の時にアラートを鳴らす事はできないのでしょうか?
重ね重ね申し訳ありません・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンのチェックが外れ...
-
JavaScriptでラジオボタンのチ...
-
JavaScript ラジオボタン デ...
-
ラジオボタンにタブインデック...
-
javascriptによる動的なリンク...
-
フォームPOST後「戻る」時のチ...
-
javascript作成してます。ラジ...
-
ラジオボタンのチェック数に応...
-
任意のinput要素同士の連動につ...
-
ラジオボタンとif文
-
【診断テストの作り方】結果に...
-
プルダウン 項目が多いので先頭...
-
<input>の選択肢をプルダウンメ...
-
TextBoxに半角数字以外を入れた...
-
【jQuery】input nameの文字列...
-
value内に変数を入れたい
-
二つの入力欄に、同時に同じ文...
-
return trueとreturn falseの用...
-
チェックボックスのON/OFFでVal...
-
JavaScriptにて動的に配列を作...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
ラジオボタンのチェックが外れ...
-
javascript作成してます。ラジ...
-
ラジオボタンでチェックした項...
-
ラジオボタンの値でリンク先を...
-
データベースの値を判断してラ...
-
Form内のselectを連動させるに...
-
フォームPOST後「戻る」時のチ...
-
【診断テストの作り方】結果に...
-
チェックボックスとテキストボ...
-
複数のラジオボタンでの選択で...
-
ラジオボタンのValueを受け取り...
-
チェックされたラジオボタンに...
-
ラジオボタンのリセット方法
-
チェックボックスのON/OFFに連...
-
JavaScript ラジオボタン デ...
-
jQueryで複数のラジオボタンを処理
-
ラジオボタンで診断テストを作...
-
ラジオボタンによる有効なボタ...
-
【javascript】firefoxでの、al...
おすすめ情報