JavaScriptで項目の表示非表示を切り替える
~ フォームデザインのカスタマイズ Vol.5 ~

こんにちは!
SDP運営事務局の二木です。

今回はJavaScriptを使って、フォームを自在に表示非表示させる方法をご紹介します。

でも、安心してください!
複雑なことはありませんよ。

 DEMOはこちら ※Q5を参照ください。



1. onclickイベントの設定

データベースの設定は、択一のセレクト(ラジオボタン)とテキストフィールドの2つ用意しました。

デフォルトは、下のようなブラウザ表示になります。

Q5のデフォルトのフォーム画像

また、データベースの構築の際、下のキャプチャのようにセレクトフィールドのラベル設定を行いますが、数値1以上なら自由に設定することができます。ただ、value値などを紐付ける役割があるため、管理しやすいものをおすすめします。

Q5のデータベース設定の画像

それでは、ラジオボタンをクリックしたら動的処理するように、Q5 のHTML部分にonclickイベントを追記しましょう。
inputタグ に onclick=”関数名();”を記入します!

<dd class="data multi1">
<ul class="radio cf">
<li><label><input class="input" type="radio" name="●●●" value="1"
onclick="entryChange1();" $●●●:r1$><span>はい</span></label></li>
<li><label><input class="input" type="radio" name="●●●" value="2"
onclick="entryChange1();" $●●●:r2$><span>いいえ</span></label></li>
</ul>
<input type="hidden" value="" name="●●●">
<span class="msg">$error:●●●$</span>
</dd>

※●●●には、データベース構築の際、フィールド名ごとに設定した差替キーワードを記入します。また、「$●●●:r1$」の“:(コロン)”以降の数値は、「ラジオボタン」で設定された、「セレクトのIDナンバー」のことで、これは自動でHTMLに記載されます。

次にQ5-1の内容を上記dd要素内に移動させます。

<dd class="data multi1">
<ul class="radio cf">
<li><label><input class="input" type="radio" name="●●●" value="1"
onclick="entryChange1();" $●●●:r1$><span>はい</span></label></li>
<li><label><input class="input" type="radio" name="●●●" value="2"
onclick="entryChange1();" $●●●:r2$><span>いいえ</span></label></li>
</ul>
<input type="hidden" value="" name="●●●">
<span class="msg">$error:●●●$</span>
<!-- 表示切替 -->
<div id="firstBox">
<p>【車種を教えてください】</p>
<input class="input $errorInputColor:●●●$" type="text"
name="●●●" value="$●●●$" maxlength="128" >
<br>
<span class="msg">$error:●●●$</span>
</div>
</dd>

上記HTMLのように、Q5-1を内包するdivにidの設定をします。
このidは、Java Script設定の際、必要になります。


2. JavaScriptの設定

【※ 4/27 修正しました】

onclickイベントの設定を終えたら、Java Scriptを追記します。

  • HTML内headの終了タグ直前にスクリプトを追記
    <script type="text/javascript">
    function entryChange1(){
    radio = document.getElementsByName('●●●') 
    if(radio[0].checked) {
    document.getElementById('firstBox').style.display = "";
    }
    else {
    document.getElementById('firstBox').style.display = "none";
    }
    }
    </script>
    
  • HTML内bodyタグにonloadを追記
    <body class="body" onload = "entryChange1();">
    

【※ 4/27 以下追加】

“いいえ”を選択した場合、確認画面で車種入力欄を非表示にする方法

確認ページのソース内に、以下2点を追記します。

確認ページの画像

  1. class名を追記

    ソース画像

  2. 車種が表示されるdlタグにclass名+上図のように$(差替キーワード):id$を追記します。

  3. headの終了タグ直前にstyleを追記
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <?php require 'demo_question/css/style.php';?>
    <style>
    /*Q5いいえを選択した場合、入力項目を非表示にさせる*/
    #SMP_STYLE dl.case2 {
     display: none;
    }
    </style>
    </head>
    

デモでは、ID:1を“はい” ID:2を“いいえ”で設定していますので、上のソースのようにdl.case2にスタイル設定を行うことで非表示になります。

カスタマイズ後

“はい”を選択

Q5のカスタマイズ後のフォーム画像01


“いいえ”を選択

Q5のカスタマイズ後の画像02