How can I hide inputs on a form based upon user input

Question

I have an application form where I need to hide 2 different divisions/sections until the user clicks on the Yes radio button and then the hidden divisions/sections will appear. I've tried different solutions and have close to what I want, but with the current code, the hidden division/section is a large blank space. Here's what I hope to achieve: When the form is first opened, the input divisions/sections are hidden and there's no blank space. When the user clicks on the "Yes" radio button, the hidden divisions/sections will appear and the fields below will move down. There will be two hidden divisions/sections so the code for each is probably going to have some unique characters.

Here's my code so far:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="EWATV Membership Application">
    <meta name="apple-mobile-web-app-title" content="EWATV Mbr App">
    <title>EWATV Membership Application</title>
    
    <!-- Script used for displaying CBO section:
         Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
    -->
    <script>
      function CBO_Check()
      {
        if (document.getElementById('CBO_Yes').checked)
        {
          document.getElementById('ifYes').style.visibility = 'visible';
        }
        else document.getElementById('ifYes').style.visibility = 'hidden';
      }
    </script>
  </head>
  <body>
    <br><br>
    Do you represent a CBO?
    <br>
    Yes <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_Yes">
     No <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_No">
    <br>
    <div id="ifYes" style="visibility:block">
      <table>
        <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
          <th colspan="2" id="CBO_INFO">Club / Business / Organization (CBO)</th>
        </tr>
        <tr>
          <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
            <label for="CBO_NAME">CBO name:</label>
          </td>
          <td class="TEXT-ALIGN-LEFT">
            <input type="text" name="CBO_NAME" id="CBO_NAME" size="65">
          </td>
        </tr>
        <tr>
          <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
            <label for="CBO_MAIL_ADDRESS">CBO Mail address:</label>
          </td>
          <td class="TEXT-ALIGN-LEFT">
            <input type="text" name="CBO_MAIL_ADDRESS" id="CBO_MAIL_ADDRESS" size="65">
          </td>
        </tr>
      </table>
    </div>
    Do you own an OHV?
    <br>
    Yes <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_Yes">
     No <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_No">
    <br>
  </body>
</html>

For brevity purposes, I have removed some of the fields from the hidden division/section.

[How to hide elements without having them take space on the page?](https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page) — Nathan Champion, Dec 04 '20 at 09:04

score 0 · Answer 1 · answered Dec 03 '20 at 19:17

0

could you please replace all instances of visibility style to display

In the div according to your need add display none or block

<div id="ifYes" style="display:block">

And in thee Js part

 document.getElementById('ifYes').style.display = 'block';

                           or

 document.getElementById('ifNo').style.display = 'none';

This will solve your problem.

answered Dec 03 '20 at 19:17

Abu Sufian

991
1
6
15

I made the changes suggested above and it doesn't do anything, i.e., doesn't mater whether I click on Yes or No, the division I want to hide does not hide. – paulp575 Dec 05 '20 at 05:18

score 0 · Answer 2 · answered Dec 05 '20 at 05:24

I made the changes suggested by Abu Sufian and doesn't change the behavior. Doesn't matter whether I click on Yes or No, the division I want to hide doesn't hide.

Here's my modified/changed code n case I may have misunderstood what code to change:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="EWATV Membership Application">
    <meta name="apple-mobile-web-app-title" content="EWATV Mbr App">
    <title>EWATV Membership Application</title>
    
    <!-- Script used for displaying CBO section
         Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
    -->
    <script>
      function CBO_Check()
      {
        if (document.getElementById('CBO_Yes').checked)
        {
          document.getElementById('ifYes').style.display = 'visible';
        }
        else document.getElementById('ifYes').style.display = 'hidden';
      }
    </script>
    </head>
    <body>
    <br><br>
    
    Do you represent a CBO?
    <br>
    Yes <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_Yes">
     No <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_No">
    <br>
    <div id="ifYes" style="display:block">
            <table>
              <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
                <th colspan="2" id="CBO_INFO">
                  Club / Business / Organization (CBO)
                </th>
              </tr>
              <tr>
                <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
                  <label for="CBO_NAME">CBO name:</label>
                </td>
                <td class="TEXT-ALIGN-LEFT">
                  <input type="text" name="CBO_NAME" id="CBO_NAME" size="65">
                </td>
              </tr>
              <tr>
                <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
                  <label for="CBO_MAIL_ADDRESS">CBO Mail address:</label>
                </td>
                <td class="TEXT-ALIGN-LEFT">
                  <input type="text" name="CBO_MAIL_ADDRESS" id="CBO_MAIL_ADDRESS" size="65">
                </td>
              </tr>
            </table>
    </div>
    Do you own an OHV?
    <br>
    Yes <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_Yes">
     No <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_No">
    <br>
    </div>
    </body>
    </html>

How can I hide inputs on a form based upon user input

2 Answers2