ラジオボタンの選択肢を選んだ時に、テキスト入力を必須にしたい

目標:ラジオボタンの選択肢を選んだ時に、テキスト入力を必須にしたい

javascriptでなんとかなりました。


手順

1.textareaが空だとエラーが出る設定にする
デフォルトの値にスペースなど表示されないものを入れ、何もないように見せかける。
値は入っているのでエラーは出ない。

2.radioボタンがチェックされた時に選択肢を調べ、テキスト入力をさせたい選択肢で、さらにtextareaにデフォルトの値(スペースなど)が入っていたら空にする。

3.テキストを入力しないと値が空なので、エラーが表示される。

4.ほかのradioボタンを選び直した時にtextareaが空であればダミーの値を入れる。


javascript

<script type="text/javascript"> function check(num,radioId,textId){ radio = document.getElementsByName(radioName); var textValue = document.getElementById(textId); if(radio[num].checked){ if(textValue.value== 'dummy'){ textValue.value = '';// valueクリア document.getElementById("error1").style.display="block";//エラー表示 } }else{ if(textValue.value== ''){ textValue.value = 'dummy'; // valueにダミーを入れる document.getElementById("error1").style.display="none";//エラー非表示 } } } </script>

checkの引数(num,radioId,textId)のうち
numは何番目の選択肢をテキスト入力を必須にするか(0始まり)
radioIDはラジオボタンのID
textIDはテキストエリアのID


ラジオボタンはnumで指定された数字が選ばれているか?
 ├選ばれている→テキストアリアにダミーが入っていたら空にする
 └選ばれていない→テキストエリアが空だったらダミーを入れる

 

HTML

おなか減ってる?<br /> <INPUT TYPE="radio" NAME="question1" VALUE="満腹" onclick="check(2,'question1','question1_text')";>満腹<br /> <INPUT TYPE="radio" NAME="question1" VALUE="普通" onclick="check(2,'question1','question1_text')";>普通<br /> <INPUT TYPE="radio" NAME="question1" VALUE="腹ぺこ" onclick="check(2,'question1','question1_text')";>腹ぺこさん<br /> 腹ぺこさんは何を食べたい?<br /> <textarea NAME="question1_text" ID="question1_text">dummy</textarea><br> <div id="error1">腹ぺこさんは入力してください</div>

SAMPLE

サンプルではスペースの代わりに「dummy」を入れてあります。


おなか減ってる?
満腹
普通
腹ぺこさん
 腹ぺこさんは何を食べたい?


  • 投稿日:
  • カテゴリ: