JavaScriptを使って入力フォームの表示・非表示を切り替えてみよう！

サイト・ブログ作成をする中でこのような悩みが出てきたことはないでしょうか。

入力フォームをもっとスッキリさせたい！
ラジオボタンの選択次第で、入力フォームの表示・非表示をしたい！

今回はこんな疑問、悩みを解決する方法をご紹介していきます。

はじめにサイトを構築する際に入力フォームをスッキリすることで、どのようなメリットがあるのか紹介していきましょう！

入力フォームをスッキリさせることのメリット
動かしてみよう！
プログラムを見てみよう！
- HTML
- JavaScript
まとめ

入力フォームをスッキリさせることのメリット

こんなことはないでしょうか？

何かしらのサービスを利用するにあたり、フォームに情報を入力する際入力フォームがいくつもあり、うんざりすることはないでしょうか？

最悪、その時点でユーザーがサイトから離脱してしまうということも起こりえてしまいます。

しかし、特定のラジオボタンの入力内容次第でその他のフォームを表示・非表示することで下記のように改善する事ができます。

UIが向上し、ユーザーのストレス軽減につながる！
サイトからユーザーの離脱を軽減する事ができる！
ユーザーのフォームへの入力漏れなどを防ぐ事ができる！

良いこと尽くめですね！

では、実際にこの機能を動かして確認してみましょう！

動かしてみよう！

例として、以下のようなフォームを作成してみました。

「利用種別」が「入会」の場合は、「入会理由」と「入会特典」を表示します。

「利用種別」が「体験」の場合は、「体験理由」のみを表示します。

利用種別	入会体験
入会理由	入会理由を入力してください。
体験理由	体験理由を入力してください。

入会特典：初月の入会費無料！

[myInclude file='tenkake_js/tenkake_js.js']

次にこの機能を実現するプログラムをご紹介していきます。

プログラムを見てみよう！

では、今回の機能を実現するプログラム例をご紹介します。

HTML

<html>
 <body>
  <form>
   <table border="0" cellspacing="0" cellpadding="0">
    <tbody>
     <tr>
      <th>利用種別</th>
      <td>
       <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange();" checked="checked"/>入会</label>
       <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange();"/>体験</label>
      </td>
     </tr>
     <!-- 表示非表示切り替え -->
     <tr id="firstBox">
      <th>入会理由</th>
      <td><input type="text" />入会理由を入力してください。</td>
     </tr>
     <!-- 表示非表示切り替え -->
     <tr id="secondBox">
      <th>体験理由</th>
      <td><input type="text" />体験理由を入力してください。</td>
     </tr>
    </tbody>
   </table>
  </form>
  <!-- 表示非表示切り替え -->
  <div id="firstNotice"><span class="hutoaka">入会特典:初月の入会費無料！</span></div>
 </body>
</html>

<html>

<body>

<form>

<tbody>

<tr>

<td>

</td>

</tr>

<td><input type="text" />入会理由を入力してください。</td>

</tr>

<td><input type="text" />体験理由を入力してください。</td>

</tr>

</tbody>

</table>

</form>

<div id="firstNotice"><span class="hutoaka">入会特典:初月の入会費無料！</span></div>

</body>

</html>

JavaScript

function entryChange(){
 radio = document.getElementsByName('entryPlan')
 if(radio[0].checked){
  document.getElementById('firstBox').style.display = "";
  document.getElementById('secondBox').style.display = "none";
  document.getElementById('firstNotice').style.display = "";
 }else if(radio[1].checked) {
  document.getElementById('firstBox').style.display = "none";
  document.getElementById('secondBox').style.display = "";
  document.getElementById('firstNotice').style.display = "none";
 }
}
window.addEventListener('load', function() {
 entryChange();
})

function entryChange(){

radio = document.getElementsByName('entryPlan')

if(radio[0].checked){

document.getElementById('firstBox').style.display = "";

document.getElementById('secondBox').style.display = "none";

document.getElementById('firstNotice').style.display = "";

}else if(radio[1].checked) {

document.getElementById('firstBox').style.display = "none";

document.getElementById('secondBox').style.display = "";

document.getElementById('firstNotice').style.display = "none";

}

window.addEventListener('load', function() {

entryChange();

})

まとめ

いかがだったでしょうか。

JavaScriptで動的に入力フォームの表示・非表示制御ができると通常のものに比べ、ストレスなく利用できそうですね！

ぜひ、参考にして見てください。最後までお読みいただきありがとうございました。