Conditional Show Fields Based Upon User Input

Discussion about any web related scripting languages like JavaScript, ASP, and PHP.
Post Reply
paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 82
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Conditional Show Fields Based Upon User Input

Post by paulp575 »

I have a form consisting of 4 parts.
Originally I wanted to have each part on a separate page, but couldn't figure out an easy way to carry the results of user input to each page and then submit the entire form so found some javascript what will allow showing parts of a form based upon user input.

Parts 1 and 4 need to be completed by every person filling out the form.
Parts 2 and 3 need to be completed depending upon user input.

Here's the original javascript:

Code: Select all

function yesnoCheck()
{
  if (document.getElementById('yesCheck').checked)
  {
    document.getElementById('ifYes').style.visibility = 'visible';
  }
  else document.getElementById('ifYes').style.visibility = 'hidden';
}
Here's the associated HTML ("other 3 and 4" do not have anything to do with the input, but kept them to ensure they do not get effected by changes to the javascript):

Code: Select all

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
 No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
 <br>
<div id="ifYes" style="visibility:hidden">
  If yes, explain: <input type='text' id='yes' name='yes'>
  <br>
  What can we do to accommodate you? <input type='text' id='acc' name='acc'>
</div>

other 3<input type='text' id='other3' name='other3'>
<br>
other 4<input type='text' id='other4' name='other4'>
<br>
Here's my - so far - abbreviated web page with updated javascript:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<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:hidden">
  If yes, explain: <input type='text' id='yes' name='yes'>
  <br>
  What can we do to accommodate you? <input type='text' id='acc' name='acc'>
</div>
<br><br>

other 3 <input type='text' id='other3' name='other3'>
<br>
other 4 <input type='text' id='other4' name='other4'>
<br><br>

This works for one conditional display of a section of the form. How would I change the javascript for a second conditional display/hiding of the form?

I'm guessing I would have to place each conditional display into separate divisions (or sections?) so the javascript knows which division (section?) the javascript would pertain to.

The first division (section?) would be "CBO_Check" and the second would be "OWN_OHV".

Thanks!
paulp575
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3506
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by Albert Wiersch »

paulp575 wrote: Sat Nov 07, 2020 5:25 pmThis works for one conditional display of a section of the form. How would I change the javascript for a second conditional display/hiding of the form?

I'm guessing I would have to place each conditional display into separate divisions (or sections?) so the javascript knows which division (section?) the javascript would pertain to.

The first division (section?) would be "CBO_Check" and the second would be "OWN_OHV".

Thanks!
Hello,

I took a look and yes, it seems like you would just need to create another "div" element (with unique "id") that you can hide/show independently from the other div/section and then replicate the JavaScript function that you already have to work with the different "id" value of the new "div" element.
paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 82
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

I create a second javascript for the second section I wanted to hide/display based upon the user's inputs.

It works for one area, but has the following problem:

1. Until the user clicks on Yes, there's a large vertical gap where the hidden inputs go. I looked on the web and couldn't find anything on how to close that gap - although some said to use some form of jQuery. I'm thinking maybe the 'display' property needs to be used but unfamiliar with that property?

2. After creating a second javascript for the second Yes/No section, when I clicked on the second Yes, it opened the FIRST section of hidden inputs (and closed the FIRST set of hidden inputs when I clicked on the second No.

After closely studying the original script and what I've created, I'm thinking something in the javascript - besides the function name needs to be changed. I'm thinking maybe the "ifYes" needs to have a unique identifyer?

Anyway, here's what I got so far:

Code: Select all

<!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>

<script>
  function OHV_Check()
  {
    if (document.getElementById('OHV_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:hidden">
          <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
            <th colspan="2" id="CBO_INFO">
              Club / Business / Organization (CBO)
            </th>
          </tr>
    <br><br>

          <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>
    <br><br>

          <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>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
              <label for="CBO_CITY">CBO City:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="text" name="CBO_CITY" id="CBO_CITY" size="65">
            </td>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
              <label for="CBO_STATE">CBO State:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <select name="CBO_STATE" id="CBO_STATE">
                <option value="WA" selected="selected">WA</option>
                <option value="ID">ID</option>
                <option value="AK">AK</option>
                <option value="AL">AL</option>
                <option value="AR">AR</option>
                <option value="AZ">AZ</option>
                <option value="CA">CA</option>
                <option value="CO">CO</option>
                <option value="CT">CT</option>
                <option value="DC">DC</option>
                <option value="DE">DE</option>
                <option value="FL">FL</option>
                <option value="GA">GA</option>
                <option value="HI">HI</option>
                <option value="IA">IA</option>
                <option value="IL">IL</option>
                <option value="IN">IN</option>
                <option value="KS">KS</option>
                <option value="KY">KY</option>
                <option value="LA">LA</option>
                <option value="MA">MA</option>
                <option value="MD">MD</option>
                <option value="ME">ME</option>
                <option value="MI">MI</option>
                <option value="MN">MN</option>
                <option value="MO">MO</option>
                <option value="MS">MS</option>
                <option value="MT">MT</option>
                <option value="NC">NC</option>
                <option value="ND">ND</option>
                <option value="NE">NE</option>
                <option value="NH">NH</option>
                <option value="NJ">NJ</option>
                <option value="NM">NM</option>
                <option value="NV">NV</option>
                <option value="NY">NY</option>
                <option value="OH">OH</option>
                <option value="OK">OK</option>
                <option value="OR">OR</option>
                <option value="PA">PA</option>
                <option value="RI">RI</option>
                <option value="SC">SC</option>
                <option value="SD">SD</option>
                <option value="TN">TN</option>
                <option value="TX">TX</option>
                <option value="UT">UT</option>
                <option value="VA">VA</option>
                <option value="VT">VT</option>
                <option value="WI">WI</option>
                <option value="WV">WV</option>
                <option value="WY">WY</option>
              </select>
            </td>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
              <label for="CBO_ZIP_CODE">CBO Zip code:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="text" name="CBO_ZIP_CODE" id="CBO_ZIP_CODE" size="25" placeholder="Include ZIP+4® if known" pattern="\d{5}-?(\d{4})?">
            </td>
          </tr>
    <br><br>

          <tr>
            <th colspan="2">One of the following is <span class="TEXT-COLOR-RED">required</span>:
              <table class="WIDTH60P MARGIN-LEFT-5_85EM">
                <tr>
                  <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
                    <label for="CBO_PHONE">CBO phone:</label>
                  </td>
                  <td class="TEXT-ALIGN-LEFT">
                    <input type="tel" name="CBO_PHONE" id="CBO_PHONE" size="35" placeholder="Numbers only please!" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
                  </td>
                </tr>
                <tr>
                  <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
                    <label for="CELL_PHONE">CBO Cell phone:</label>
                  </td>
                  <td class="TEXT-ALIGN-LEFT">
                    <input type="tel" name="CBO_CELL_PHONE" id="CBO_CELL_PHONE" size="35" placeholder="Numbers only please!" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
                  </td>
                </tr>
              </table>
            </th>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
              <label for="CBO_E-MAIL_ADDRESS">CBO E-Mail Address:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="email" name="CBO_E-MAIL_ADDRESS" id="CBO_E-MAIL_ADDRESS" size="65">
            </td>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
              <label for="CBO_CONFIRM_E-MAIL_ADDRESS">Confirm CBO E-Mail Address:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="email" name="CBO_CONFIRM_E-MAIL_ADDRESS" id="CBO_CONFIRM_E-MAIL_ADDRESS" size="65">
            </td>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
              <label for="CBO_WEB_ADDRESS">CBO Web address:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="url" name="CBO_WEB_ADDRESS" id="CBO_WEB_ADDRESS" size="65">
            </td>
          </tr>


</div>
<br><br>

<!--
          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED" id="label_OWN_OHV">Do you own an OHV?</td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="radio" name="OWN_OHV" id="OWN_OHV_YES" value="Yes">
              <label for="OWN_OHV_YES">Yes</label>
              <input type="radio" name="OWN_OHV" id="OWN_OHV_NO" value="No" class="MARGIN-LEFT-5EM">
              <label for="OWN_OHV_NO">No</label>
            </td>
          </tr>
-->
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 id="ifYes" style="visibility:hidden">
          <tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
            <th colspan="2" id="OHV_INFO">
              OHV Info
            </th>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
              <label for="OHV_TYPE">OHV Type:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <select name="OHV_TYPE" id="OHV_TYPE">
                <option value="" selected="selected">Select OHV Type</option>
                <option value="ATV">ATV</option>
                <option value="SxS">SxS</option>
                <option value="Other">Other</option>
              </select>
            </td>
          </tr>
    <br><br>

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
              <label for="OHV_YEAR">OHV Year:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="text" name="OHV_YEAR" id="OHV_YEAR" size="17">
            </td>
          </tr>

    <br><br>

</div>

</body>
</html>
I know there's some CSS not used. Just want to get the code set and then I can slowly introduce the formatting through CSS.

Thanks!
paulp575
Post Reply