質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

JavaScript、ラジオボタンでのフォームの表示・非表示の切り替え方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,256

moppu

score 7

 前提

現在cakePHP3を使い、簡単なwebサイトを作成しています。

期待値

ユーザーとチームの登録ページを作成しているのですが、ラジオボタンでユーザーを選択するとユーザー登録用のフォームが2つ出てきて、ラジオボタンでチームを選択するとチーム登録用のフォームが2つ出るようにしたいです。

 発生している問題・エラーメッセージ

ラジオボタンでユーザーを選択した場合の表示は正常なのですが、ラジオボタンでチームを選択した場合にフォームが切り替わることなくフォームが増えてしまう現象が起きる。(消えてほしいものが消えない)

 該当のソースコード

<form class="form-control" action="./score" method="post">
  <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
    <tr>
          <th>登録種別</th>
          <td>
              <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />ユーザー</label>
              <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />チーム</label>
          </td>
    </tr>

      <!-- 表示非表示切り替え -->
      <tr id="firstBox">
      <tr>
            <th>ユーザー名:</th>
            <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
      </tr>
      <tr>
        <th>チーム名:</th>
          <td>
            <select class="custom-select">
              <option selected>チーム選択</option>
              <option value="1">A-team</option>
              <option value="2">B-team</option>
              <option value="3">C-team</option>
              <option value="4">D-team</option>
              <option value="5">E-team</option>
            </select>
          </td>
            <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
      </tr>
    </tr>

      <!-- 表示非表示切り替え -->
      <tr id="secondBox">
      <th>チーム名:</th>
          <td><input type="text" class="form-control" placeholder="チーム名"/></td>
    </tr>
  </table>
</form>

<!--スクリプト-->
<script type="text/javascript">
    function entryChange1(){
        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.onload = entryChange1;
</script>

 変更後の問題点

フォームを2つずつ表示させたいのですが <tr>が一つにしかかからない為、ラジオボタンを切り替えても、フォームが3つ表示され切り替わらない。

変更後ソース

<!--インデント整えたバージョン-->

<form class="form-control" action="./score" method="post">
    <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <th>登録種別</th>
            <td>
                <label>
                    <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
                    ユーザー
                </label>
                <label>
                    <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
                    チーム
                </label>
            </td>
        </tr>
        <!-- 表示非表示切り替え -->
        <tr><!-- ←追加分-->
            <tr id="firstBox">
                <!--<tr> ←削除分-->
                <th>ユーザー名:</th>
                <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
            </tr>
            <tr>
                <th>チーム名:</th>
                <td>
                    <select class="custom-select">
                        <option selected>チーム選択</option>
                        <option value="1">A-team</option>
                        <option value="2">B-team</option>
                        <option value="3">C-team</option>
                        <option value="4">D-team</option>
                        <option value="5">E-team</option>
                    </select>
                </td>
                <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
            </tr>
        </tr>
        <!-- 表示非表示切り替え -->
        <tr><!-- ←追加分-->
            <tr id="secondBox">
                <!--<tr> ←削除分-->
                <th>チーム名:</th>
                <td><input type="text" class="form-control" placeholder="チーム名"/></td>
            </tr>
            <tr>
                <th>ユーザー名:</th>
                <td>
                    <select class="custom-select">
                        <option selected>ユーザー選択</option>
                        <option value="1">User-A</option>
                        <option value="2">User-B</option>
                        <option value="3">User-C</option>
                        <option value="4">User-D</option>
                        <option value="5">User-E</option>
                    </select>
                </td>
                <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
            </tr>
        </tr>

    </table>
</form>

<!--スクリプト-->
<script type="text/javascript">
    function entryChange1(){
        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.onload = entryChange1;
</script>

追記(20180830) 解決したソース

<form class="form-control" action="./score" method="post">
  <div>
    <span>登録種別</span>
    <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />ユーザー</label>
    <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />チーム</label>
  </div>

  <div id="entry_as_user" class="form_contents">
    <label>ユーザ名:
      <input type="text" class="form-control" placeholder="ユーザー名"/>
    </label>
    <label>チーム名:
      <select class="custom-select">
        <option selected>チーム選択</option>
        <option value="1">A-team</option>
        <option value="2">B-team</option>
        <option value="3">C-team</option>
        <option value="4">D-team</option>
        <option value="5">E-team</option>
      </select>
    </label>
    <button type="submit">SUBMIT_A</button>
  </div>

  <div id="entry_as_team" class="form_contents">
    <label>チーム名:
      <input type="text" class="form-control" placeholder="チーム名"/>
    </label>
    <label>ユーザ名:
      <select class="custom-select">
        <option selected>ユーザー選択</option>
        <option value="1">User-A</option>
        <option value="2">User-B</option>
        <option value="3">User-C</option>
        <option value="4">User-D</option>
        <option value="5">User-E</option>
      </select>
    </label>
    <button type="submit">SUBMIT_B</button>
  </div>
</form>

<!--スクリプト-->
<script type="text/javascript">
  function entryChange1(){
    var eau = document.getElementById('entry_as_user');
    var eat = document.getElementById('entry_as_team');

    radio = document.getElementsByName('entryPlan')
    if(radio[0].checked) {
      //フォーム
      eau.style.display = "";
      eat.style.display = "none";
      //特典
      //document.getElementById('firstNotice').style.display = "";
    }else if(radio[1].checked) {
      //フォーム
      eau.style.display = "none";
      eat.style.display = "";
      //特典
      //document.getElementById('firstNotice').style.display = "none";
    }
  }

  //オンロードさせ、リロード時に選択を保持
  window.onload = entryChange1;
</script>
.form_contents >label{
  display: block;
}


以上のソースコードを用いることで当初の期待値である、ラジオボタンごとのフォームの切り替え及び登録ボタンの差し替えが可能になりました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/08/29 11:56

    実際には終了タグは省略可能なので、<tr id="firstBox">の直前に</tr>が補われ、後方にある</tr>が無視されると思いますが、それは意図したものではないでしょう

    キャンセル

  • x_x

    2018/08/29 16:09

    直す気がない感じですか?

    キャンセル

  • moppu

    2018/08/29 17:16

    修正中になります。

    キャンセル

回答 1

checkベストアンサー

+2

ブラウザの開発者ツールを起動してください.このようになっています
(gifはfirefoxのもの)
イメージ説明
別タブで開けば,原寸大で見れるので,何が起こっているのか分かると思います
tr.firstBoxにはきちんと,jsは効いていますが,idが振られている場所がおかしいです

HTMLを見てみると,

<tr id="firstBox">
<tr>
  <th>ユーザー名:</th>
  <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
</tr>


となっています.

おそらく,

<tr id="firstBox">
  <th>ユーザー名:</th>
  <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
</tr>


ではないでしょうか?

開発者ツールを使えばこのようなミスをすぐ見つけられます
開発者ツールの開き方・使い方はOS・ブラウザによって微妙に違うので,詳しいやり方はご自身で調べてみてください.

また,同様のミスを防ぐ工夫として「インデントを整える」ことをおすすめします.
ちょうど開発者ツールのように,タグの入れ子構造を記述することで,閉じタグ忘れや不要な開始タグを見つけやすくなります.あと,Web開発向けのエディタ(AtomやBrackets,VSCodeなど)は,構文エラーの有無を教えてくれます.使ってみてください.


idを振るべきタグは下のタグのようです(これも,インデントを整えておけばすぐ分かる)
うっかりしていました(汗)
liveweaveのリントがはくエラーを消そうとしてこう書きましたが,x_xさんのご指摘の通り,tr要素の直下にtr要素は書けないです.つまり,下のgifのようにやるのは間違いになります
イメージ説明


追記(20180830)

  • 表組み修正版
<form class="form-control" action="./score" method="post">
  <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th>登録種別</th>
      <td>
        <label>
          <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
          ユーザー
        </label>
        <label>
          <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
          チーム
        </label>
      </td>
    </tr>
  </table>
  <table id="entry_as_user">
    <tr>
      <th>ユーザー名:</th>
      <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
    </tr>
    <tr>
      <th>チーム名:</th>
      <td>
        <select class="custom-select">
          <option selected>チーム選択</option>
          <option value="1">A-team</option>
          <option value="2">B-team</option>
          <option value="3">C-team</option>
          <option value="4">D-team</option>
          <option value="5">E-team</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><button type="submit">SUBMIT_A</button></td>
    </tr>
  </table>
  <table id="entry_as_team">
    <tr>
      <th>チーム名:</th>
      <td><input type="text" class="form-control" placeholder="チーム名"/></td>
    </tr>
    <tr>
      <th>ユーザー名:</th>
      <td>
        <select class="custom-select">
          <option selected>ユーザー選択</option>
          <option value="1">User-A</option>
          <option value="2">User-B</option>
          <option value="3">User-C</option>
          <option value="4">User-D</option>
          <option value="5">User-E</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><button type="submit">SUBMIT_B</button></td>
    </tr>
  </table>
</form>

<!--スクリプト-->
<script type="text/javascript">
  function entryChange1(){
    var eau = document.getElementById('entry_as_user');
    var eat = document.getElementById('entry_as_team');

    radio = document.getElementsByName('entryPlan')
    if(radio[0].checked) {
      //フォーム
      eau.style.display = "";
      eat.style.display = "none";
      //特典
      //document.getElementById('firstNotice').style.display = "";
    }else if(radio[1].checked) {
      //フォーム
      eau.style.display = "none";
      eat.style.display = "";
      //特典
      //document.getElementById('firstNotice').style.display = "none";
    }
  }

  //オンロードさせ、リロード時に選択を保持
  window.onload = entryChange1;
</script>
  • div版+css
    イメージ説明
<form class="form-control" action="./score" method="post">
  <div>
    <span>登録種別</span>
    <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />ユーザー</label>
    <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />チーム</label>
  </div>

  <div id="entry_as_user" class="form_contents">
    <label>ユーザ名:
      <input type="text" class="form-control" placeholder="ユーザー名"/>
    </label>
    <label>チーム名:
      <select class="custom-select">
        <option selected>チーム選択</option>
        <option value="1">A-team</option>
        <option value="2">B-team</option>
        <option value="3">C-team</option>
        <option value="4">D-team</option>
        <option value="5">E-team</option>
      </select>
    </label>
    <button type="submit">SUBMIT_A</button>
  </div>

  <div id="entry_as_team" class="form_contents">
    <label>チーム名:
      <input type="text" class="form-control" placeholder="チーム名"/>
    </label>
    <label>ユーザ名:
      <select class="custom-select">
        <option selected>ユーザー選択</option>
        <option value="1">User-A</option>
        <option value="2">User-B</option>
        <option value="3">User-C</option>
        <option value="4">User-D</option>
        <option value="5">User-E</option>
      </select>
    </label>
    <button type="submit">SUBMIT_B</button>
  </div>
</form>

<!--スクリプト-->
<script type="text/javascript">
  function entryChange1(){
    var eau = document.getElementById('entry_as_user');
    var eat = document.getElementById('entry_as_team');

    radio = document.getElementsByName('entryPlan')
    if(radio[0].checked) {
      //フォーム
      eau.style.display = "";
      eat.style.display = "none";
      //特典
      //document.getElementById('firstNotice').style.display = "";
    }else if(radio[1].checked) {
      //フォーム
      eau.style.display = "none";
      eat.style.display = "";
      //特典
      //document.getElementById('firstNotice').style.display = "none";
    }
  }

  //オンロードさせ、リロード時に選択を保持
  window.onload = entryChange1;
</script>
.form_contents >label{
  display: block;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/30 13:28

    あ,これも言い忘れてました

    すでに解決した部分があれば,質問欄を編集し,追記を行ってください
    でないと,他の人からは,何も進んでいないように見えてしまいます

    また,1つの投稿につき,課題は1つに絞るのが良いです
    でないと,ずるずると長引いてしまい,内容が複雑化したり具体化し過ぎて,他の人にとっては全く役に立たない内容になってしまうことが多々あるからです

    質問内容を単純化・抽象化することで,回答者が自身の知見を再確認できるだけでなく,解決方法を知りたくてクリップしたり,ネット検索でたどり着いた方たちがその技術について深く学ぶのに役立てることもできます

    課題が1つ解決したら解決済みにして,新しい疑問は改めて投稿し,一連の質問のリンクを参考用に貼っておく,というのが良いようです
    もちろん,元の質問と技術的に近い話題であれば,新たに投稿し直す必要はありません

    ただ,teratailがただのQ&Aサイトだけでなく,ノウハウの共有サイトの側面をも強く持っていることは意識してください

    質問・回答ともに,役立つ情報となるよう心がけましょう

    キャンセル

  • 2018/08/30 13:32

    >処理ページは表示せずトーストを表示したい
    処理はいくらでも隠せます(だからワンクリック詐欺とかその発展形がある)
    トースト出すのも,submit()されたらdivにclassを付与する,とかのパターンで出来ると思います

    ちょっと投稿が長くなってきましたし,他の方が状況を把握しづらいと思うので,このあたりの実装については,一度ご自身でトライした上で,改めて分からないところを質問するようにしてください

    キャンセル

  • 2018/08/30 13:43

    当初の質問の期待値を満たせたため終了とさせていただきます。
    長い間、細かいところまでの指摘、指示ありがとうございました。
    助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる