What is the best way to hide divs in cf8 while the client is filling out a form and make visible based on seection.

I have a form that people select either "vacation" or "residential" there are certain fields that need to be hidden if either is selected. They need to be on the page just hidden if they are not relevent.


I use CF8.
propert type: Vacation Residential (select Property type)
NightlyRates (this is for property type = Vacation and should be hidden if residential is selected)
Condo fees (this is for property type = Vacation and should be hidden if residential is selected)
School district (this is for property type = Residential and should be hidden if vaction is selected)


<cfform target="_self" method="post" name="ajaxform" preloader="no">
  <p>
    propert type:
<cfselect enabled="No" name="Property type"  id="propertytype" multiple="no"> 
      <option value="Vacation">Vacation</option>
    <option value="Residential">Residential</option>
    </cfselect>
  (select Property type)</p>
  
<p>NightlyRates
    <label for="textfield"></label>
    <input name="Nightlyrates" type="text" id="nightlyrates" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)<br />
  </p>
 
  <p>Condo fees 
    <input name="condofees" type="text" id="textfield2" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)</p>
  <p>School district 
    <input name="schooldistrict" type="text" id="schooldistrict" size="12" />
  (this is for property type = Residential and should be hidden if vaction is selected)</p>
  <p>
    <label for="button"></label>
    <input type="submit" name="button" id="button" value="Submit" />
  </p>
</cfform>

Open in new window

LeadCoAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
azadisaryevConnect With a Mentor Commented:
with a little bit of jQuery majic this is as easy as pie. see attached code
(re-worked a bit to add default selection to the cfselect and to set default display for the other fields. classes were added to the <p> tags containing your form fields so js function can easily find and show/hide them).


download jQuery js library from http://jquery.com

Azadi
<script type="text/javascript" src="/path/to//jquery.js"></script>
<script type="text/javascript">
showhidefields = function(el){
	$('._'+el).hide();
	$('.'+el).show();
}
</script>
<cfparam name="form.propertytype" default="Vacation">
<cfform target="_self" method="post" name="ajaxform" preloader="no">
  <p>
    propert type:
<cfselect enabled="No" name="propertytype"  id="propertytype" multiple="no" onChange="showhidefields(this.value);"> 
<option value="Vacation" <cfif form.propertytype eq "Vacation">selected="selected"</cfif>>Vacation</option>
<option value="Residential">Residential</option>
</cfselect>
  (select Property type)</p>
  
<p class="Vacation _Residential" <cfif form.propertytype eq "Residential">style="display:none"</cfif>>NightlyRates
    <label for="textfield"></label>
    <input name="Nightlyrates" type="text" id="nightlyrates" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)<br />
  </p>
 
  <p class="Vacation _Residential"<cfif form.propertytype eq "Residential">style="display:none"</cfif>>Condo fees 
    <input name="condofees" type="text" id="textfield2" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)</p>
  <p class="_Vacation Residential"<cfif form.propertytype eq "Vacation">style="display:none"</cfif>>School district 
    <input name="schooldistrict" type="text" id="schooldistrict" size="12" />
  (this is for property type = Residential and should be hidden if vaction is selected)</p>
  <p>
    <label for="button"></label>
    <input type="submit" name="button" id="button" value="Submit" />
  </p>
</cfform>

Open in new window

0
 
azadisaryevCommented:
sorry, forgot to add <cfif> into the second <option>:

<option value="Residential" <cfif form.propertytype eq "Residential">selected="selected"</cfif>>Residential</option>

Azadi
0
 
LeadCoAuthor Commented:
To host jquery does it require linux, I have dedicated server windows 2003.  I went to jquery.com and found that it does not appear to be available on a windows server (jquery).
Is that correct? What do you suggest?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Start Now
 
LeadCoAuthor Commented:
Ok I am a bonehead. Ignore that last post. I just got educated. Its live and working.  One last question on this subject.

If I want to start the form with only the property type selection field visible and keep same function as above. What changes would need to be made to script?  Here is code I have:
<script type="text/javascript" src="/jscript/jquery.js"></script>
<script type="text/javascript">
showhidefields = function(el){
	$('._'+el).hide();
	$('.'+el).show();
}
</script>
<cfparam name="form.propertytype" default="Vacation">
<cfform target="_self" method="post" name="ajaxform" preloader="no">
  <p>
    propert type:
<cfselect enabled="No" name="propertytype"  id="propertytype" multiple="no" onChange="showhidefields(this.value);"> 
<option value="Vacation" <cfif form.propertytype eq "Vacation">selected="selected"</cfif>>Vacation</option>
<option value="Residential" <cfif form.propertytype eq "Residential">selected="selected"</cfif>>Residential</option>
</cfselect>
  (select Property type)</p>
  
<p class="Vacation _Residential" <cfif form.propertytype eq "Residential">style="display:none"</cfif>>NightlyRates
    <label for="textfield"></label>
    <input name="Nightlyrates" type="text" id="nightlyrates" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)<br />
  </p>
 
  <p class="Vacation _Residential"<cfif form.propertytype eq "Residential">style="display:none"</cfif>>Condo fees 
    <input name="condofees" type="text" id="textfield2" size="5" />
  (this is for property type = Vacation and should be hidden if residential is selected)</p>
  <p class="_Vacation Residential"<cfif form.propertytype eq "Vacation">style="display:none"</cfif>>School district 
    <input name="schooldistrict" type="text" id="schooldistrict" size="12" />
  (this is for property type = Residential and should be hidden if vaction is selected)</p>
  <p>
    <label for="button"></label>
    <input type="submit" name="button" id="button" value="Submit" />
  </p>
</cfform>

Open in new window

0
 
LeadCoAuthor Commented:
What I meant above was to start with only the cfselectbox visable and the rest invisable.
0
 
LeadCoAuthor Commented:
Ok I think I got it.

This code:
<script type="text/javascript" src="/jscript/jquery.js"></script>  (this calls the script)
<script type="text/javascript">
showhidefields = function(el){      (this sets is so that the selected either _vacation hides or _residential)
      $('._'+el).hide();
      $('.'+el).show();
}
</script>

The selection determines the value of  (el) either Vacation or residential.

<cfselect enabled="No" name="propertytype"  id="propertytype" multiple="no" onChange="showhidefields(this.value);">
<option value="Vacation" <cfif form.propertytype eq "Vacation">selected="selected"</cfif>>Vacation</option>
<option value="Residential" <cfif form.propertytype eq "Residential">selected="selected"</cfif>>Residential</option>
</cfselect>


I got it.

Thanks.
0
 
LeadCoAuthor Commented:
Thanks Again!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.