[SOLVED] Conditional Show Fields Based Upon User Input

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] 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!
Last edited by paulp575 on Fri Jan 08, 2021 6:14 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
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
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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 »

Hello,

1. Yes, "display: none" will cause it to not even take up any space as if it's not in the HTML source/layout at all. The "visibility" property determines whether it's visible (it's still there taking up space but it might be invisible & not rendered). Here's more information on the "display" property:

https://www.htmlvalidator.com/help.php?m=1&h=display
and
https://developer.mozilla.org/en-US/doc ... SS/display

This is what MDN says about the "none" value for "display":
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.
So instead of "visibility", you could use "display" and set it to "none" or "block".

2. It looks like you're using id="ifYes" for more than one element so that's probably the root of the problem, as you suspected. CSS HTML Validator should be generating this message for that:

The "id" attribute value "ifYes" has already been used in this document. An element's "id" value must be unique within the document. An element cannot have an "id" attribute that has already been used. Note that "id" values are treated as being case-sensitive.

I hope this helps!
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

I tried by changing the following line:

Code: Select all

<div id="ifYes" style="visibility:hidden">
to this:

Code: Select all

<div id="ifYes" style="display:none">
Now when you click on Yes it doesn't display anything!

So then I tried changing this:

Code: Select all

<script>
  function CBO_Check()
  {
    if (document.getElementById('CBO_Yes').checked)
    {
      document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';
  }
</script>
to this:

Code: Select all

<script>
  function CBO_Check()
  {
    if (document.getElementById('CBO_Yes').checked)
    {
      document.getElementById('ifYes').style.display = 'visible';
    }
    else document.getElementById('ifYes').style.display = 'hidden';
  }
</script>
That didn't help work.

So I changed this line:

Code: Select all

<div id="ifYes" style="visibility:hidden">
to this:

Code: Select all

<div id="ifYes" style="visibility:block">
What that did was initially display the division.

If I check "no", the division disappears but is still an empty space.

This is the effect I'm trying to achieve:

When the form is initially opened, the division is hidden. If a user click on No, the question about OHV use is displayed.
If the user clicks on Yes, then the division about CBO is displayed.

I will take a deeper looking into the references/links you showed above, but when I did originally, I didn't fully understand what it was telling me.

Thanks.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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: Sun Nov 29, 2020 9:57 pm I tried by changing the following line:

Code: Select all

<div id="ifYes" style="visibility:hidden">
to this:

Code: Select all

<div id="ifYes" style="display:none">
Now when you click on Yes it doesn't display anything!
You'll need to change display back to 'block' or other appropriate value.
paulp575 wrote: Sun Nov 29, 2020 9:57 pm So then I tried changing this:

Code: Select all

<script>
  function CBO_Check()
  {
    if (document.getElementById('CBO_Yes').checked)
    {
      document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';
  }
</script>
to this:

Code: Select all

<script>
  function CBO_Check()
  {
    if (document.getElementById('CBO_Yes').checked)
    {
      document.getElementById('ifYes').style.display = 'visible';
    }
    else document.getElementById('ifYes').style.display = 'hidden';
  }
</script>
That didn't help work.
Please see this link for valid values for the 'display' property:
https://developer.mozilla.org/en-US/doc ... SS/display

You probably want 'block' instead of 'visible'.
paulp575 wrote: Sun Nov 29, 2020 9:57 pm So I changed this line:

Code: Select all

<div id="ifYes" style="visibility:hidden">
to this:

Code: Select all

<div id="ifYes" style="visibility:block">
What that did was initially display the division.
Yes, the "style" attribute will be ignored because 'block' is not a valid value for 'visibility'.
paulp575 wrote: Sun Nov 29, 2020 9:57 pm If I check "no", the division disappears but is still an empty space.

This is the effect I'm trying to achieve:

When the form is initially opened, the division is hidden. If a user click on No, the question about OHV use is displayed.
If the user clicks on Yes, then the division about CBO is displayed.

I will take a deeper looking into the references/links you showed above, but when I did originally, I didn't fully understand what it was telling me.

Thanks.
Please be careful not to mix-up the difference between the 'visible' and 'display' properties, and be sure to understand that they take different values. I think by using the property that does what you want with the correct value for that property you should be able to get this to work the way you want.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

This is all way above my head.
I found stackoverflow website and will be posting there later today.
Appreciate all your help with this.
I will post after I get a response from stackoverflow.
paulp575
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

Finally getting back to this without success.

I've decided to not worry about the area of blank space.
But, I need to figure out how to make this work.

The current code:

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>
              </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>
When I click on the first set of Yes or No buttons, everything works as it should.

However, clicking on the second set of buttons makes the first currently hidden section to appear.
Then clicking on the second set of Yes or No button works with the first text that is hidden by default.

I think the problem is that both divisions have the same id of ifYes. Not sure how to have different division ids so each will work separately.

Thanks.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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 »

Yes, the first thing I recommend that you do is not use duplicate IDs. CSS HTML Validator should be generating an error about that.

Why not use "ifYes1" and "ifYes2" instead of "ifYes"?

Also, there are a bunch of "tr" elements that are not in a "table" element in the HTML you provided.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

Quick response -

I recognize there are "tr" elements without a table. I wanted to provide a minimal code set. They wouldn't think they would impact the javascript.

I will try your suggestion and get back with you.
paulp575
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

That worked - thanks!

I've updated the code and inserted the necessary table tags.

When I run it through the HTML Validator, I'm getting the following errors:

Lines 136, 137, 246, and 247:
An "input" element with type="radio" should normally have both the "name" and "value" attributes even though this is not technically required by the HTML/XHTML specification.
---
It is recommended that the unnecessary pseudo-protocol "javascript:" be removed. An exception would be if this is actually a real JavaScript label statement and it is used as such (this is rare).

Not sure if I should be concerned about this or not. You can see in the commented out text I had the name, id, and value.

This is a form that will be submitted electronically and the recipient of the form submission will see name of the field (name) and it's value, i.e.: First Name: Johnny

Also the following style error messages were shown after validation:

Lines144 (HTML Validator didn't pick up this error on line 254):
Using "display: none" or "visibility: hidden" to hide content still causes the downloading of any resources in that content (like images) even though the resources may never be used or displayed (unless it is in an inactive media query). Keep this in mind, and, if possible, use alternate methods (like media queries) that are more efficient and that won't download resources that will not be used or displayed. This message is displayed only once.
---
(Styles) Using "display: none" or "visibility: hidden" to hide text may be considered spamming and "black hat SEO". Be sure not to purposely use this technique to hide text and content for search engine purposes. This message is displayed only once.

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>

<style>
  <!--
    body
    {
      FONT-SIZE: 12pt;
      FONT-FAMILY: Arial,helvetica,sans-serif;
      MARGIN: 0px;
      BACKGROUND-COLOR: #ffffff;
    }

    TABLE, TD
    {
      BORDER: 1px solid black;
      BORDER-COLLAPSE: collapse;
      PADDING: 5px;
    }
  -->
</style>

<!-- 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('ifYes1').style.visibility = 'visible';
    }
    else document.getElementById('ifYes1').style.visibility = 'hidden';
  }
</script>

<!-- Script used for displaying OHV section
     Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
-->
<script>
  function OHV_Check()
  {
    if (document.getElementById('OHV_Yes').checked)
    {
      document.getElementById('ifYes2').style.visibility = 'visible';
    }
    else document.getElementById('ifYes2').style.visibility = 'hidden';
  }
</script>

<!-- Script used for selecting OHV Make and Model
     Source for script code: http://www.jyotiranjan.in/blog/create-dynamic-drop-down-list/
-->

<script>
  function dynamicdropdown(listindex)
  {
    document.getElementById("OHV_MAKE_MODEL").length = 0;
    switch (listindex)
    {
      case "CanAm" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Commander","Commander");
      document.getElementById("OHV_Model").options[2]=new Option("Defender","Defender");
      document.getElementById("OHV_Model").options[3]=new Option("Maverick","Maverick");
      document.getElementById("OHV_Model").options[4]=new Option("Outlander","Outlander");
      document.getElementById("OHV_Model").options[5]=new Option("Renegade","Renegade");
      document.getElementById("OHV_Model").options[6]=new Option("Other CanAm","Other CanAm");
      break;

      case "Honda" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Foreman","Foreman");
      document.getElementById("OHV_Model").options[2]=new Option("Pioneer","Pioneer");
      document.getElementById("OHV_Model").options[3]=new Option("Rancher","Rancher");
      document.getElementById("OHV_Model").options[4]=new Option("Recon","Recon");
      document.getElementById("OHV_Model").options[5]=new Option("Rincon","Rincon");
      document.getElementById("OHV_Model").options[6]=new Option("Rubicon","Rubicon");
      document.getElementById("OHV_Model").options[7]=new Option("Talon","Talon");
      document.getElementById("OHV_Model").options[8]=new Option("TRX","TRX");
      document.getElementById("OHV_Model").options[9]=new Option("Other Honda","Other Honda");
      break;

      case "Polaris" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Ace","Ace");
      document.getElementById("OHV_Model").options[2]=new Option("General","General");
      document.getElementById("OHV_Model").options[3]=new Option("Ranger","Ranger");
      document.getElementById("OHV_Model").options[4]=new Option("RZR","RZR");
      document.getElementById("OHV_Model").options[5]=new Option("Sportsman","Sportsman");
      document.getElementById("OHV_Model").options[5]=new Option("Other Polaris","Other Polaris");
      break;

      case "Suzuki" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("KingQuad","KingQuad");
      document.getElementById("OHV_Model").options[2]=new Option("Other Suzuki","Other Suzuki");
      break;

      case "Yamaha" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Grizzly","Grizzly");
      document.getElementById("OHV_Model").options[2]=new Option("Kodiak","Kodiak");
      document.getElementById("OHV_Model").options[3]=new Option("Raptor","Raptor");
      document.getElementById("OHV_Model").options[4]=new Option("Viking","Viking");
      document.getElementById("OHV_Model").options[5]=new Option("Wolverine","Wolverine");
      document.getElementById("OHV_Model").options[6]=new Option("YZR","YZR");
      document.getElementById("OHV_Model").options[7]=new Option("Other Yamaha","Other Yamaha");
      break;

      case "Other" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Other OHV Model","Other OHV Model");
      break;
    }
    return true;
  }
</script>
<!-- End of script used for OHV Make and Model -->

</head>

<body>

<table>
  <tr>
    <td colspan="2">
      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">
<!--
              <input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_YES" value="Yes">
              <label for="CBO_REPRESENT_YES">Yes</label>
              <input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_NO" value="No" class="MARGIN-LEFT-5EM">
              <label for="CBO_REPRESENT_NO">No</label>
-->
      <table id="ifYes1" 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>
        <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>
        <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>
        <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>
            </select>
          </td>
        </tr>
        <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>
        <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="CBO_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>
        <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>
        <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>
        <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>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      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">
<!--
              <input type="radio" name="OHV_OWN" id="OHV_OWN_YES" value="Yes">
              <label for="OHV_OWN_YES">Yes</label>
              <input type="radio" name="OHV_OWN" id="OHV_OWN_NO" value="No" class="MARGIN-LEFT-5EM">
              <label for="OHV_OWN_NO">No</label>
-->
      <table id="ifYes2" 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>
        <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>
        <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="20" title="Four numbers please!" placeholder="Four numbers please!">
          </td>
        </tr>
        <tr>
          <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
            <label for="OHV_MAKE">OHV Make and Model:</label>
          </td>
          <td class="TEXT-ALIGN-LEFT">
            <section id="OHV_MAKE_MODEL">
              <select name="OHV_MAKE" id="OHV_MAKE" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                <option value="" selected="selected">Select OHV Make</option>
                <option value="CanAm">CanAm</option>
                <option value="Honda">Honda</option>
                <option value="Polaris">Polaris</option>
                <option value="Suzuki">Suzuki</option>
                <option value="Yamaha">Yamaha</option>
                <option value="Other">Other</option>
              </select>
              <select name="OHV_MODEL" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option>
                <option value="" selected="selected">First Select OHV Make</option>
              </select>
            </section>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body>
</html>
Thanks!
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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: Mon Jan 04, 2021 10:18 pm That worked - thanks!
Great!
paulp575 wrote: Mon Jan 04, 2021 10:18 pm When I run it through the HTML Validator, I'm getting the following errors:

Lines 136, 137, 246, and 247:
An "input" element with type="radio" should normally have both the "name" and "value" attributes even though this is not technically required by the HTML/XHTML specification.
It's a warning and not an error but it seems to be OK in your case.
paulp575 wrote: Mon Jan 04, 2021 10:18 pm It is recommended that the unnecessary pseudo-protocol "javascript:" be removed. An exception would be if this is actually a real JavaScript label statement and it is used as such (this is rare).
This is also a warning and not an error. I would recommend removing the "javascript:" part. It should still work. If it doesn't then please let me know.
paulp575 wrote: Mon Jan 04, 2021 10:18 pm Also the following style error messages were shown after validation:

Lines144 (HTML Validator didn't pick up this error on line 254):
Using "display: none" or "visibility: hidden" to hide content still causes the downloading of any resources in that content (like images) even though the resources may never be used or displayed (unless it is in an inactive media query). Keep this in mind, and, if possible, use alternate methods (like media queries) that are more efficient and that won't download resources that will not be used or displayed. This message is displayed only once.
This is just an informational message to make you aware of the potential of downloading resources that aren't used, which doesn't seem to be an issue in your case.
paulp575 wrote: Mon Jan 04, 2021 10:18 pm (Styles) Using "display: none" or "visibility: hidden" to hide text may be considered spamming and "black hat SEO". Be sure not to purposely use this technique to hide text and content for search engine purposes. This message is displayed only once.
Also an informational message for people who might try to spam the search engines (which is not what you're doing).
paulp575 wrote: Mon Jan 04, 2021 10:18 pm Thanks!
You're welcome! Hope this helps. :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

It certainly did help - a big thanks!

I recognized that it was a warning, but prefer to have code that passes without any messages. Obviously that's not possible - warnings are okay.

One more question: In the "CBO Represent" field you can see the commented out text has the 'name="CBO_REPRESENT'. If I'm doing forms correctly, this should be the name of the form element that will be passed in a formatted e-mail to the recipients of this form. Without that - as the current active code shows, I don't think that is included. How would the recipient know what field this belongs to? I've already got a name element in the active text, but it doesn't tell me what the field name is (it's only "yesno").

Code: Select all

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
              Do you represent a CBO?
            </td>
            <td>
              Yes <input type="radio" onclick="CBO_Check();" name="yesno" id="CBO_Yes">
              <span class="MARGIN-LEFT-5_00EM">
                No <input type="radio" onclick="CBO_Check();" name="yesno" id="CBO_No">
              </span>
<!-- This code commented out:
          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD" id="label_CBO_REPRESENT">Do you represent a Club,<br>Business, or Organization (CBO)?</td>
            <td class="TEXT-ALIGN-LEFT">
              <input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_YES" value="Yes">
              <label for="CBO_REPRESENT_YES">Yes</label>
              <input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_NO" value="No" class="MARGIN-LEFT-5_00EM">
              <label for="CBO_REPRESENT_NO">No</label>
            </td>
          </tr>
-->
            </td>
          </tr>
          
Again - TIA.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
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: Wed Jan 06, 2021 12:21 am It certainly did help - a big thanks!
You're welcome!
paulp575 wrote: Wed Jan 06, 2021 12:21 am I recognized that it was a warning, but prefer to have code that passes without any messages. Obviously that's not possible - warnings are okay.
You can disable validator messages that you don't want to see... so it should be possible in most cases. Also, you can do an 'Errors only' validation so warnings and other less important messages will not show up in the results.
paulp575 wrote: Wed Jan 06, 2021 12:21 amOne more question: In the "CBO Represent" field you can see the commented out text has the 'name="CBO_REPRESENT'. If I'm doing forms correctly, this should be the name of the form element that will be passed in a formatted e-mail to the recipients of this form. Without that - as the current active code shows, I don't think that is included. How would the recipient know what field this belongs to? I've already got a name element in the active text, but it doesn't tell me what the field name is (it's only "yesno").
The form control name is "yesno" but there is no value, so you probably want to add a "value" attribute to the controls that have name="yesno"... so you can then get a name / value pair (control_name=value).

Without specifying the control name like name="CBO_REPRESENT", I'm not sure (off the top of my head) how the value would be passed... if at all. I'd have to do some research/testing.... but it seems like you would want both a "name" and "value" attribute if you are processing the form fields into a formatted email to someone.

Hope I am understanding all this correctly.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Conditional Show Fields Based Upon User Input

Post by paulp575 »

I added the values to the answered.
Once I get the validations and error messages figured out, I need to set up the server side to ensure e-mails are handled correctly.
I'll let you know if this works or not.
paulp575
Post Reply