Solved

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

Posted on 2009-04-07
7
219 Views
Last Modified: 2013-12-24
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

0
Comment
Question by:LeadCo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
7 Comments
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 24084864
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
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24084879
sorry, forgot to add <cfif> into the second <option>:

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

Azadi
0
 

Author Comment

by:LeadCo
ID: 24089291
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
Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

 

Author Comment

by:LeadCo
ID: 24090054
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
 

Author Comment

by:LeadCo
ID: 24090165
What I meant above was to start with only the cfselectbox visable and the rest invisable.
0
 

Author Comment

by:LeadCo
ID: 24090288
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
 

Author Closing Comment

by:LeadCo
ID: 31567384
Thanks Again!
0

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
Lease-to-own eliminates the expenditure of hardware replacement and allows you to pay off the server over time. Usually, this is much cheaper than leasing servers. Think of lease-to-own as credit without interest.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question