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

Question

前提

現在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;
}

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

Comments

[m.ts10806]

htmlから始まっているコードにJavaScriptとつけるくらいならコードブロックを分けてHTMLとJavaScript別々にしたほうが違和感がありませんしコードハイライトも適切になって読みやすくなります。ご検討ください。

[liveasnotes]

Windows機上の Chrome 68.0.3440.106 (64-bit), Firefox 61.0.2 (64-bit), IE 11.0.9600.19101 の全てで当該動作は確認できませんでした．確認した環境について詳しくお書きください

[moppu]

環境はchromeで開発環境はcakephp3を使用しています。質問内容としましては、ラジオボタンにチェックを入れた際に、2つフォームを表示させたいことです。

[liveasnotes]

ああ，すみません，寝ぼけてました．display = "";が効いていないんですね？

[moppu]

そうですね。ユーザーのラジオボタンを選択した際はユーザー登録用のフォーム、チームのラジオボタンを選択したときは、チームの登録フォームが2つ表示させるようにしたいのです。

[liveasnotes]

インデントの幅は統一した方が良いです．読みづらいので

[x_x]

まずHTMLを直さないと先にすすめないかと

[moppu]

修正箇所を教えてくださるとありがたいです・・・・。開発者ツールを確認してもどこがおかしいかわからない為にフォームが３つ表示されているので（切り替わらない）・・・。

[x_x]

tr直下にまたtrが来ているのがおかしいです。HTML4 においてtrの子はthかtdです。http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#edef-TR

[x_x]

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

[x_x]

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

[moppu]

修正中になります。

Answer 1

ブラウザの開発者ツールを起動してください．このようになっています
（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;
}

Comments

[moppu]

回答ありがとうございます。
gifにあるのですが、チームを選択した場合はユーザーのフォームは消して、2つのフォームだけを表示させるようにしたいのです・・・。

また指摘にあるHTMLを入力した場合、ユーザー名をいれるフォームしか表示されなくなった気がしました。（開発機は今無いため実践できず、明日の朝続きをします）

[moppu]

フォームを2つずつ表示させたい為、入れ替えを行ったのですが反映されず3つ表示されます。
（なぜ入力フォームをプルダウンフォームを入れ替えただけで表示が切り替わらなくなるのかがわからない）

[liveasnotes]

よくよく考えたら，「tr（Table Row: 列）」の中に「tr」があるって意味わからないですね
（いつのまにか3次元に（笑
コード直しておきます

あと確認してほしいのですが，JSで操作しているのは，#firstBoxと#secondBoxだけですよね？
であれば，操作していない「tr」のdisplayプロパティの値は変わりませんから，その場に残り続けても何らおかしくないのではないでしょうか？

あと，「切り替わらない」というのがよく分からないので，どのラジオボタンを選択したときに，どンな形式のどの項目が表示されてほしいのかを箇条書きでお伝えいただけないでしょうか．よろしくお願いします

[moppu]

やりたいこととしましては、ラジオボタンでフォームを切り替えることです。
さきほど変更後のコードを上げましたように、
・”ユーザー”のラジオボタンを選択すると、ユーザー名をいれるフォームと、登録してあるチームを選択するプルダウンが表示されてほしいです。

・”チーム”のラジオボタンを選択すると、チーム名をいれるフォームと、登録してあるユーザーを選択するプルダウンが表示されてほしいです。

※登録されてあるとは将来的にDBから取得したい為です。
現在はフォームのみの切り替えが実現することが期待値です。

ご不明点あれば指摘お願いします。

[moppu]

追記ありがとうございます。
ラジオボタンに対する挙動は求めていたものになりました。

また、ラジオボタンごとに登録ボタンを挿入する箇所はどこになるかわかりますか？
（自分で挿入してみたところフォーム下に配置できなかった為）

・ユーザー選択時はユーザーの登録ボタン
・チーム選択時はチームの登録ボタンをフォームの下に配置したいのですが・・・。

（また、いまではないですが将来的にプルダウンの内容はDBから取得することは可能でしょうか？）

何度も質問、申し訳ございません。もしよろしければお願いします。

[liveasnotes]

>ラジオボタンごとに登録ボタンを挿入する箇所
表示非表示はjsでやっているので，マークアップがおかしくない位置に，新たにtrを挿入すればよいだけです
全体の基本構造は，
<form>
　<table>
　　<!--ユーザ登録-->
　　<tr>～～～</tr>
　　<tr>～～～</tr>
　　<!--チーム登録-->
　　<tr>～～～</tr>
　　<tr>～～～</tr>
　</table>
</form>
となっていたと思いますが，これならtrを入れるべき場所は
ユーザ登録，チーム登録の最後の行が適していると思われます

尚，フォームを作る際はテーブルを用いる必要はありません
cf.「初めての HTML フォーム」(https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form)

そういった意味でも，要素を挿入する位置はそこまで深く考えなくても大丈夫です（もちろん，form要素の中に配置しておく方が自然ですが）

改めて言いますが，要素の表示非表示はjsでやっています（あなたがそのようなコードを書いています）

つまり，要素を追加しただけでは，ラジオボタン押下による挙動は，質問者さんの意図するものとならないことに留意してください（jsを書き換える必要があります）

もし，これが面倒であるなら，
<form>
　<table>
　　<!--ユーザ登録-->
　　<tr>～～～</tr>
　　<tr>～～～</tr>
　<table>
　</table>
　　<!--チーム登録-->
　　<tr>～～～</tr>
　　<tr>～～～</tr>
　</table>
</form>
のように書き換え，trからtableに対してidを振り直し，そのidで表示非表示を切り替えるようにすれば，table内の要素を追加しても，jsを書き換える必要はなくなります

>プルダウンの内容はDBから取得することは可能でしょうか
可能です（これができなければ多くのWebサービスは貧弱なものとなっていたでしょう）
詳しい方法については別投稿で質問していただいた方が良いかと思います

[moppu]

回答ありがとうございます。

＞これならtrを入れるべき場所は
ユーザ登録，チーム登録の最後の行が適していると思われます

一番したに挿入すると一番上に表示され、期待通りの挙動にならない為質問させていただきました。
（これはcssの問題でしょうか？）

＞尚，フォームを作る際はテーブルを用いる必要はありません
DivなどにJSのIDを紐づけるような形で、ということでしょうか？

＞要素を追加しただけでは，ラジオボタン押下による挙動は，質問者さんの意図するものとならないことに留意してください
設計上テーブルにIDをつけるのか、今のような構造のほうがいいのか、というのは設計上ありますでしょうか？

お手数ですが、お時間ありましたらお願い致します。

[liveasnotes]

>cssの問題でしょうか
HTMLとJSの問題です．CSSはまだ関係しません

>DivなどにJSのIDを紐づけるような形で
です

>設計上テーブルにIDをつけるのか、今のような構造のほうがいいのか、というのは
個人的には，ネストが深くなりやすい「表組み」は，あまり好きではありませんが，表組みを手早く作りたいならテーブルで良いと思います．
ただ，今後ビジュアルをいじりたいと思っているなら，テーブルを使わない方が自由度は高いです
（表組みだと，セルごとに仕切られてしまうので）

回答の方に，またコードを追記しておくので，何をどうしたのか確認してみてください
---
エラーが出て追記できなかったので，回答から過程の部分を消しました

[moppu]

div＋jsの方法を試してみたところうまく動作致しました。今後のビジュアル面などを考えこちらを使います。ありがとうございます。

また、登録ボタンをユーザー用とチーム用と分けているのですが、これはformタグにactionを書いてもわけることは不可能ですよね…？

[moppu]

上記につきましては、onclickを使いjquryを用いることで多分解決できました。

[liveasnotes]

フォームの取り扱いを分ける方法は主に2つあります

①サーバ側で処理する

<input type="radio" name="registertype" value="asuser" required>
<input type="radio" name="myradio" value="asteam">

<input name="username" value="tarou">
<input name="selectedteamname" value="ABC">
<input name="teamname" value="">
<input name="selectedusername" value="">

という要素があるフォームの場合，
「?registertype=asuser&username=tarou&selectedteamname=ABC」というデータが送信されます
サーバ側で処理する際に，このname属性の値で処理を振り分ければよいです

あるいは，そもそもフォームを2つに分け，送信先のスクリプトもそれぞれ別のものにするという手もあります

・複数タブをHTML,CSSで実装するデモ：　https://thimbleprojects.org/liveasnotes/532250/
（リンク先右上の「リミックス」ボタンでコードの閲覧・編集可）

②クライアントサイド（ブラウザ上）で処理する

name属性で振り分ける処理をクライアントサイドで行います
既にプラグインを試しているようなので，省略します

尚，クライアントサイドでのスクリプト実行の際には気を付けるべきことがあります

登録機能程度であればさほど問題ないでしょうが，データベースの「書き換え」や，ログイン状態の振り分け等の処理はクライアントサイドで実行するスクリプトには書かないでください．クライアントサイドのスクリプトはいくらでもいじれます（少し前に流行したクッキークリッカーは好例）

あと，言い忘れていましたが，選択・記入必須の項目にはrequired属性を付けておくことをおすすめします

[moppu]

2パターンの照会+属性のおすすめ、ご回答ありがとうございます。
・登録ボタンを押下後にDBにデータを収納するようにするには、登録ボタン→処理ページ遷移→完了トースト表示　などの流れですかね？（処理ページは表示せずトーストを表示したい）

上記は可能ですか？

[liveasnotes]

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

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

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

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

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

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

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

[liveasnotes]

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

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

[moppu]

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