概要
ラジオボタンをいくつか用意して、そのボタンが押された項目だけ入力可能になり、なおかつデータの送信も選択した物のみしたい場合の行い方です。今回はファイルを分けてjavascriptをimportはせず、全てhtml 内に記述する方法を紹介します。背景
二つの選択肢の内一つを選択してもらい、その内容を回答してもらうフォームを作成しようとして、画面を分けて１：選択してもらう画面
２：フォームを入力してもらう画面
と分割する手もあったのですが、かっこいいから（動的に画面を表示させたいから）一つの画面で行おうと思い、作成しました。disabled属性をどのように動的に反映させるかを勉強したため、備忘録として記事を掲載します。
内容
HTML
html
<form action="./Send" method="post">
<input type="radio" name="judge" id="data1" onclick="changeDisabled()" required>
<label for="data1">データ1</label><br>
内容1<input type="text" name="content1" id="content1"><br>
<input type="radio" name="judge" id="data2" onclick="changeDisabled()" required>
<label for="data2">データ2</label><br>
内容2<input type="text" name="content2" id="content2"><br>
<input type="submit" value="送信">
</form>
scriptタグの位置は任意ですが、今回はbodyタグ終了後に記述しました。
javascript
javascript
<script>
function changeDisabled(){
if(document.getElementById("data1").checked){
document.getElementById("content1").disabled = false;
document.getElementById("content2").disabled = true;
}else if(document.getElementById("data2").checked){
document.getElementById("content1").disabled = true;
document.getElementById("content2").disabled = false;
}
}
</script>
解説
javascript
function changeDisabled(){
function関数を用いて"changeDisabled"という関数を作成します。これが実行されると以下の処理が実行されていきます。
javascript
if(document.getElementById("data1").checked){
javascript内では、htmlのラジオボタンやテキストボックスの状態を"getElementById"を用いて取得しています。
この部分でid=data1のラジオボタンが押されているか判定します。押されている場合は以下の処理を行います。
javascript
document.getElementById("content1").disabled = false;
document.getElementById("content2").disabled = true;
ラジオボタンと同様に、"getElementById"を用いてフォームの状態を取得します。
disabled属性はtrueの時、そのフォームを入力不可能な状態にし、またデータの送信も行いません。（0文字の空欄を送る？nullではない）
データ1のラジオボタンを押すと、内容1のフォームを入力、送信可能にしたいため、disabled属性をfalseにします。そして、内容2のフォームのdisabled属性をtrueにすることによって、内容2のフォームは入力、送信不可能に変わります。
javascript
}else if(document.getElementById("data2").checked){
document.getElementById("content1").disabled = true;
document.getElementById("content2").disabled = false;
後半は同様の処理を逆で行っています。
最後に、現在作成した"changeDisabled"関数をhtmlのラジオボタンに適応していきます。
html
<input type="radio" name="judge" id="data1" onclick="changeDisabled()" required>
このようにタグ内の"onclick"に関数をはめ込むことによって、ラジオボタンが押されるたびに関数が実行されるようになります。