Home>
Assumptions

I am currently creating a simple website using cakePHP3.

Expected value

I have created a registration page for users and teams. When I select a user with a radio button, two forms for user registration appear. When I select a team with a radio button, a form for team registration appears. I want to get two.

Error message

The display when the user is selected with the radio button is normal, but when the team is selected with the radio button, the form will increase without switching the form. (I want to disappear will not disappear)

Applicable source code
<form action = "./ score" method = "post">
  <table border = "0" cellspacing = "0" cellpadding = "0"&​​gt;
    <tr>
          <th>registration_type</th>
          <td>
              <label><input type = "radio" name = "entryPlan" value = "hoge1" onclick = "entryChange1 ();" checked = "checked" />user</label>
              <label><input type = "radio" name = "entryPlan" value = "hoge2" onclick = "entryChange1 ();" />Team</label>
          </td>
    </tr>
      <!-Hide/Hide->
      <tr>
      <tr>
            <th>Username:</th>
            <td><input type = "text" placeholder = "username" /></td>
      </tr>
      <tr>
        <th>Team name:</th>
          <td>
            <select>
              <option selected>Team selection</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>Please enter the name of the person introduced.</p></td>->
      </tr>
    </tr>
      <!-Hide/Hide->
      <tr>
      <th>Team name:</th>
          <td><input type = "text" placeholder = "team name" /></td>
    </tr>
  </table>
</form>
<!-Script->
<script type = "text/javascript">
    function entryChange1 () {
        radio = document.getElementsByName ('entryPlan')
        if (radio [0] .checked) {
            // form
            document.getElementById ('firstBox'). style.display = "";
            document.getElementById ('secondBox'). style.display = "none";
            // Privilege
            //document.getElementById('firstNotice').style.display = "";
        } else if (radio [1] .checked) {
            // form
            document.getElementById ('firstBox'). style.display = "none";
            document.getElementById ('secondBox'). style.display = "";
            // Privilege
            //document.getElementById('firstNotice').style.display = "none";
        }
    }
    // Onload and keep selection on reload
    window.onload = entryChange1;
</script>
Problems after the change

I want to display two forms at a time. Since there is only one<tr> ;, even if I switch radio buttons, three forms are displayed and do not switch.

Changed source
&lt;!-indented version-&gt;
&lt;form action = "./ score" method = "post"&gt;
    &lt;table border = "0" cellspacing = "0" cellpadding = "0"&​​gt;
        &lt;tr&gt;
            &lt;th&gt;registration_type&lt;/th&gt;&lt;td&gt;
                &lt;label&gt;
                    &lt;input type = "radio" name = "entryPlan" value = "hoge1" onclick = "entryChange1 ();" checked = "checked" /&gt;
                    user
                &lt;/label&gt;
                &lt;label&gt;
                    &lt;input type = "radio" name = "entryPlan" value = "hoge2" onclick = "entryChange1 ();" /&gt;
                    team
                &lt;/label&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-Hide/Hide-&gt;
        &lt;tr&gt;&lt;!-← Additional amount-&gt;
            &lt;tr&gt;
                &lt;!-&lt;tr&gt;← Deleted-&gt;
                &lt;th&gt;Username:&lt;/th&gt;
                &lt;td&gt;&lt;input type = "text" placeholder = "username" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th&gt;Team name:&lt;/th&gt;
                &lt;td&gt;
                    &lt;select&gt;
                        &lt;option selected&gt;Team selection&lt;/option&gt;
                        &lt;option value = "1"&gt;A-team&lt;/option&gt;
                        &lt;option value = "2"&gt;B-team&lt;/option&gt;
                        &lt;option value = "3"&gt;C-team&lt;/option&gt;
                        &lt;option value = "4"&gt;D-team&lt;/option&gt;
                        &lt;option value = "5"&gt;E-team&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/td&gt;
                &lt;!-&lt;p&gt;Please enter the name of the person introduced.&lt;/p&gt;&lt;/td&gt;-&gt;
            &lt;/tr&gt;
        &lt;/tr&gt;
        &lt;!-Hide/Hide-&gt;
        &lt;tr&gt;&lt;!-← Additional amount-&gt;
            &lt;tr&gt;
                &lt;!-&lt;tr&gt;← Deleted-&gt;
                &lt;th&gt;Team name:&lt;/th&gt;
                &lt;td&gt;&lt;input type = "text" placeholder = "team name" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th&gt;Username:&lt;/th&gt;
                &lt;td&gt;
                    &lt;select&gt;
                        &lt;option selected&gt;User selected&lt;/option&gt;
                        &lt;option value = "1"&gt;User-A&lt;/option&gt;
                        &lt;option value = "2"&gt;User-B&lt;/option&gt;
                        &lt;option value = "3"&gt;User-C&lt;/option&gt;
                        &lt;option value = "4"&gt;User-D&lt;/option&gt;
                        &lt;option value = "5"&gt;User-E&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/td&gt;
                &lt;!-&lt;p&gt;Please enter the name of the person introduced.&lt;/p&gt;&lt;/td&gt;-&gt;
            &lt;/tr&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/form&gt;
&lt;!-Script-&gt;
&lt;script type = "text/javascript"&gt;
    function entryChange1 () {
        radio = document.getElementsByName ('entryPlan')
        if (radio [0] .checked) {
            // form
            document.getElementById ('firstBox'). style.display = "";
            document.getElementById ('secondBox'). style.display = "none";
            // Privilege
            //document.getElementById('firstNotice').style.display = "";
        } else if (radio [1] .checked) {
            // form
            document.getElementById ('firstBox'). style.display = "none";
            document.getElementById ('secondBox'). style.display = "";
            // Privilege
            //document.getElementById('firstNotice').style.display = "none";}
    }
    // Onload and keep selection on reload
    window.onload = entryChange1;
&lt;/script&gt;
Added (20180830) Solved source
&lt;form action = "./ score" method = "post"&gt;
  &lt;div&gt;
    &lt;span&gt;Registration type&lt;/span&gt;
    &lt;label&gt;&lt;input type = "radio" name = "entryPlan" value = "hoge1" onclick = "entryChange1 ();" checked = "checked" /&gt;user&lt;/label&gt;
    &lt;label&gt;&lt;input type = "radio" name = "entryPlan" value = "hoge2" onclick = "entryChange1 ();" /&gt;Team&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;Username:
      &lt;input type = "text" placeholder = "username" /&gt;
    &lt;/label&gt;
    &lt;label&gt;Team name:
      &lt;select&gt;
        &lt;option selected&gt;Team selection&lt;/option&gt;
        &lt;option value = "1"&gt;A-team&lt;/option&gt;
        &lt;option value = "2"&gt;B-team&lt;/option&gt;
        &lt;option value = "3"&gt;C-team&lt;/option&gt;
        &lt;option value = "4"&gt;D-team&lt;/option&gt;
        &lt;option value = "5"&gt;E-team&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;button type = "submit"&gt;SUBMIT_A&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label&gt;Team name:
      &lt;input type = "text" placeholder = "team name" /&gt;
    &lt;/label&gt;
    &lt;label&gt;Username:
      &lt;select&gt;
        &lt;option selected&gt;User selected&lt;/option&gt;
        &lt;option value = "1"&gt;User-A&lt;/option&gt;
        &lt;option value = "2"&gt;User-B&lt;/option&gt;
        &lt;option value = "3"&gt;User-C&lt;/option&gt;
        &lt;option value = "4"&gt;User-D&lt;/option&gt;
        &lt;option value = "5"&gt;User-E&lt;/option&gt;
      &lt;/select&gt;
    &lt;/label&gt;
    &lt;button type = "submit"&gt;SUBMIT_B&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
&lt;!-Script-&gt;
&lt;script type = "text/javascript"&gt;
  function entryChange1 () {
    var eau = document.getElementById ('entry_as_user');
    var eat = document.getElementById ('entry_as_team');
    radio = document.getElementsByName ('entryPlan')
    if (radio [0] .checked) {
      // form
      eau.style.display = "";
      eat.style.display = "none";
      // Privilege
      //document.getElementById('firstNotice').style.display = "";
    } else if (radio [1] .checked) {
      // form
      eau.style.display = "none";
      eat.style.display = "";
      // Privilege
      //document.getElementById('firstNotice').style.display = "none";
    }
  }
  // Onload and keep selection on reload
  window.onload = entryChange1;
&lt;/script&gt;
. form_contents&gt;label {
  display: block;
}


By using the above source code, it is now possible to switch the form for each radio button and replace the registration button, which is the initial expected value.

  • Answer # 1

    Launch the browser developer tool. It looks like this
    (Gif is from firefox)

    If you open it in another tab, you can see it in full size so you can see what's going on
    js works properly fortr.firstBox, but the place where id is assigned is strange

    Looking at HTML,

    <tr id = "firstBox">
    <tr>
      <th>Username:</th>
      <td><input type = "text" placeholder = "username" /></td>
    </tr>


    It has become.

    Probably

    <tr id = "firstBox">
      <th>Username:</th>
      <td><input type = "text" placeholder = "username" /></td>
    </tr>


    it might be?

    You can spot these mistakes right away with developer tools
    How to open and use developer tools is slightly different depending on the OS and browser, so please check the details on your own.

    In addition, it is recommended to "indent" to prevent similar mistakes.
    Just like a developer tool, describing the nested structure of tags makes it easier to find forgotten closing tags and unnecessary start tags. Also, web development editors (Atom, Brackets, VSCode, etc.) will tell you if there are any syntax errors. Please try using it.


    The tag to whichid should be given seems to be the tag below (this can also be understood if the indent is arranged)
    I was careless (sweat)
    Liveweave's lint wrote to try to clear the error, but as x_x pointed out, you can't write the tr element directly under the tr element. In other words, it would be a mistake to do it like the gif below


    Added (20180830)

    Table revision

    <form action = "./ score" method = "post">
      <table border = "0" cellspacing = "0" cellpadding = "0"&​​gt;
        <tr>
          <th>registration_type</th>
          <td>
            <label>
              <input type = "radio" name = "entryPlan" value = "hoge1" onclick = "entryChange1 ();" checked = "checked" />
              user
            </label>
            <label>
              <input type = "radio" name = "entryPlan" value = "hoge2" onclick = "entryChange1 ();" />
              team
            </label>
          </td>
        </tr>
      </table>
      <table id = "entry_as_user">
        <tr>
          <th>Username:</th>
          <td><input type = "text" placeholder = "username" /></td>
        </tr>
        <tr>
          <th>Team name:</th>
          <td>
            <select>
              <option selected>Team selection</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>Team name:</th>
          <td><input type = "text" placeholder = "team name" /></td>
        </tr>
        <tr>
          <th>Username:</th>
          <td>
            <select>
              <option selected>User 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->
    <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) {
          // form
          eau.style.display = "";
          eat.style.display = "none";
          // Privilege
          //document.getElementById('firstNotice').style.display = "";
        } else if (radio [1] .checked) {
          // form
          eau.style.display = "none";
          eat.style.display = "";
          // Privilege
          //document.getElementById('firstNotice').style.display = "none";
        }
      }
      // Onload and keep selection on reload
      window.onload = entryChange1;
    </script>

    div version + css

    <form action = "./ score" method = "post">
      <div>
        <span>Registration type</span>
        <label><input type = "radio" name = "entryPlan" value = "hoge1" onclick = "entryChange1 ();" checked = "checked" />user</label>
        <label><input type = "radio" name = "entryPlan" value = "hoge2" onclick = "entryChange1 ();" />Team</label>
      </div>
      <div id = "entry_as_user">
        <label>Username:
          <input type = "text" placeholder = "username" />
        </label>
        <label>Team name:
          <select>
            <option selected>Team selection</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">
        <label>Team name:
          <input type = "text" placeholder = "team name" />
        </label>
        <label>Username:
          <select>
            <option selected>User 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->
    <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) {
          // form
          eau.style.display = "";
          eat.style.display = "none";
          // Privilege
          //document.getElementById('firstNotice').style.display = "";
        } else if (radio [1] .checked) {
          // form
          eau.style.display = "none";
          eat.style.display = "";
          // Privilege
          //document.getElementById('firstNotice').style.display = "none";
        }
      }
      // Onload and keep selection on reload
      window.onload = entryChange1;
    </script>
    . form_contents>label {
      display: block;
    }