asked on

hide and show form fields based on selection box choice

Hello everyone. I've been trying to hide/display a few elements in my form when a certain selection is chosen. I was doing this by hiding <div> (thanks to a previous question) however it's not working exactly how it should so I thought I'd start over. Maybe using <div> display isn't the best approach for what I'm trying to achieve.

Currently, when 'Procedure' is selected from _1_1_18_1, selection box _1_1_45_1 changes to YES. Function setSelect achieves this.

I have four fields which must be hidden on page load:
_1_1_46_1
_1_1_47_1
_1_1_48_1
_1_1_49_1

When 'Yes' is selected from _1_1_45_1, we should display the four fields mentioned above. We must account for the setSelect function because 'Procedure' changes _1_1_45_1 to 'Yes'.

Please see my page code below. What's the best way of hiding/showing form elements based on selection?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function setSelect(_1_1_18_1) {
  var _1_1_45_1 = _1_1_18_1.form._1_1_45_1; // or document.getElementById("_1_1_45_1");
  _1_1_45_1.selectedIndex=0; // deselect
  if (_1_1_18_1.options[_1_1_18_1.selectedIndex].value == "Procedure") {
      for (var i = 0; i<_1_1_45_1.options.length;i++) {
        if (_1_1_45_1.options[i].value == "Yes")  {
          _1_1_45_1.selectedIndex = i;
          break;
        }
      }
   }
}
</script>

<body>

		<div id="container">
	<form class="wufoo" name="myForm" action="[LL_CGIPATH/]" enctype="multipart/form-data" method="POST">
		<input type="HIDDEN" name="func" value="[LL_FUNC /]" />
		<input type="HIDDEN" name="LL_FUNC_VALUES" value="[LL_FUNC_VALUES /]" />
		<input type="HIDDEN" name="LL_AttrFieldName" value="" />
		<input type="HIDDEN" name="LL_AttrFieldIndex" value="" />
		<input type="HIDDEN" name="LL_WFATTURL" value="[LL_WFATTURL /]" />
        
        		<div class="info">
			<h2>New Document Request</h2>
			<div>
				<p>Please complete this form</strong>.
				<br />
				Fields marked with an <span class="req">*</span> are required.</p>
			</div>
		</div>
		<ul>

			<li><label class="desc">Document Type</label>
			<div>
  <SELECT CLASS="selectMenu" ID="_1_1_18_1" NAME="_1_1_18_1" ONCHANGE="setSelect(this);">
    <OPTION VALUE="" >&lt;None&gt;</OPTION>    
    <OPTION VALUE="Policy" >Policy</OPTION>
    <OPTION VALUE="Form" >Form</OPTION>
    <OPTION VALUE="Work Instruction" >Work Instruction</OPTION>
    <OPTION VALUE="Program/Plan/Manual" >Program/Plan/Manual</OPTION>
    <OPTION VALUE="Procedure" >Procedure</OPTION>
    <OPTION VALUE="Presentation" >Presentation</OPTION>
    <OPTION VALUE="Multimedia" >Multimedia</OPTION>
    <OPTION VALUE="Reference" >Reference</OPTION>
  </SELECT>
			</div>
			</li> 

            <!--------------------------->
            <!--    SAP INFORMATION    -->
            <!--------------------------->       
            <li class="section">
			<h3>SAP Information</h3>
			<div>
				Please update the following SAP-related document information.</div>
			</li>
            
            <li><label class="desc">Does this request impact SAP? <span class="req">*</span></label>
			<div>
			<SELECT CLASS="selectMenu" ID="_1_1_45_1" NAME="_1_1_45_1" ONCHANGE="">
				<OPTION VALUE="" >&lt;None&gt;</OPTION>
				<OPTION VALUE="Yes" >Yes</OPTION>
				<OPTION VALUE="No" >No</OPTION>
			</SELECT>
			</div>
			</li>
            

            <li><label class="desc">Has it been reviewed/approved by GBS?</label>
			<div>
			<SELECT CLASS="selectMenu" ID="_1_1_46_1" NAME="_1_1_46_1" ONCHANGE="">
				<OPTION VALUE="" >&lt;None&gt;</OPTION>
				<OPTION VALUE="Yes" >Yes</OPTION>
				<OPTION VALUE="No" >No</OPTION>
			</SELECT>				
			</div>
			</li>

            

            <li>
			<label class="desc">Will this change be included in Weekly SAP Change Communication?</label>
			<div>
			<SELECT CLASS="selectMenu" ID="_1_1_47_1" NAME="_1_1_47_1" ONCHANGE="">
				<OPTION VALUE="" >&lt;None&gt;</OPTION>
				<OPTION VALUE="Yes" >Yes</OPTION>
				<OPTION VALUE="No" >No</OPTION>
			</SELECT>				
			</div>
			</li>

           

            <li><label class="desc">Help Desk Ticket Number or Project Number</label>
			<div>
			<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_48_1" TITLE="Help Desk Ticket Number or Project Number" ID="_1_1_48_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="">				
			</div>
			</li>

            

             <li><label class="desc">Rev-Trac Request Number</label>
			<div>
			<INPUT CLASS="field text medium" TYPE="text" NAME="_1_1_49_1" TITLE="Rev-Trac Request Number" ID="_1_1_49_1" VALUE="" SIZE="32" MAXLENGTH="32" ONCHANGE="">				
			</div>
			</li>


            
            <!--------------------------->
            <!--        BUTTONS        -->
            <!--------------------------->
		</ul>
        <div>
		<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Apply" NAME="IgnoreMe" ONCLICK="doFormSubmit( document.myForm );">
		<INPUT CLASS="resetButton" TYPE="RESET" VALUE="Reset">
        </div>
	</form>


</body>
</html>

Open in new window

Gary

I'm confused what is it with the previous fiddle that is not working correctly?

AxISQS

ASKER

@GaryC123 When I launched it on my site it didn't work. I'm not calling any whacky JS functions either but it worked fine locally so I don't know what happened.

When I insert text between <div id="SAPInformation" style="display: none;"> EXAMPLE TEXT EXAMPLE TEXT </div>

Only the Example Text would hide/display. The form elements seems to ignore what you assisted with.

Gary

Open and close your lists properly - that could be breaking it
You should start with <ul> and end with </ul> but...
Your lists are messed up, you need to go through the code and check the markup - I'm not sure how it should be as you seem to have nested lists. I'll have a look now, but I may have to go.

Is there any reason for using a list?

ASKER CERTIFIED SOLUTION

Gary

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer