ラジオボタンによってフォームの入力可能・不可能を動的に切り替える方法

概要

ラジオボタンをいくつか用意して、そのボタンが押された項目だけ入力可能になり、なおかつデータの送信も選択した物のみしたい場合の行い方です。今回はファイルを分けて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"に関数をはめ込むことによって、ラジオボタンが押されるたびに関数が実行されるようになります。