[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Changing form contents based on selected option in cfselect field

Posted on 2006-05-08
7
Medium Priority
?
231 Views
Last Modified: 2013-12-24
This is related to this other question:

http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_21840149.html

Is there  a way to do this with CF instead of javascript? What I want to do is to include several additional fields in a form if certain options are selected in a cfselect field. The solution in the other question works fine, except I tried using a cfinclude inside each conditionally displayed div tag, but it includes them all. Here's the code I'm using:

<script>
var v='';
function doS(div) {
document.getElementById(div).style.display='inline';
if(v.length) {
document.getElementById(v).style.display='none';
}
v=div;
}
</script>

<<<several form elements go here ...>>>
<<<Here's the row with the relevant cfselect tag>>>

      <tr>
            <td align="right" valign="top"><strong>Member Type:</strong></td>
            <td valign="top"><cfselect name="MemberType_FK" label="Member Type" onchange="doS(this.value);" onfocus="v=this.value">
<option value="0">Nonmember</option>
<option value="1">Pending</option>
<option value="2">Designated</option>
<option value="3">State Certified</option>
<option value="4">State Licensed</option>
<option value="5">Candidate</option>
<option value="6">Senior</option>
<option value="7">Honorary</option>
<option value="8">Affiliate</option>
</cfselect></td>
<td colspan="4" align="right" valign="top"><div id="0" style="display:none;">&nbsp;</div>
<div id="1" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="2" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="3" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="4" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="5" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="6" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="7" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div>
<div id="8" style="display:none;"><cfinclude template="qry_members_addedit_form.cfm"></div></td>
</tr>

When I select option 0 in the form, nothing displays, as expected. When I select options 1-8, however, it displays the included file 8 times.
0
Comment
Question by:brucecrabtree
  • 3
  • 2
6 Comments
 
LVL 25

Expert Comment

by:dgrafx
ID: 16634284
You can't do it that way

<tr>
<td align="right" valign="top"><strong>Member Type:</strong></td>
<td valign="top">
<cfselect name="MemberType_FK" label="Member Type" onchange="doS(this.value);" onfocus="v=this.value">
<option value="0">Nonmember</option>
<option value="1">Pending</option>
<option value="2">Designated</option>
<option value="3">State Certified</option>
<option value="4">State Licensed</option>
<option value="5">Candidate</option>
<option value="6">Senior</option>
<option value="7">Honorary</option>
<option value="8">Affiliate</option>
</cfselect></td>

<div id="0" style="display:none;">
<td colspan="4">&nbsp;
</td>
</div>
<div id="1" style="display:none;">
<td colspan="4">
<cfinclude template="qry_members_addedit_form.cfm">
</td>
</div>
et cetera - put your other divs here with <td> inside div
</tr>
0
 

Author Comment

by:brucecrabtree
ID: 16635564
I tried it but it still includes the file 8 times, plus it now adds 8 table cells too.
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 16635952
OK - I wasn't really thinking details

You'll need to assign the id in your template
like this is example included template:
<tr id="two" style="display:none;">
<td>
<table><tr><td style="background-color:blue;">
This is ID 2
</td></tr></table>
</td>
</tr>
and this is another:
<tr id="three" style="display:none;">
<td>
<table><tr><td style="background-color:green;">
This is ID 3
</td></tr></table>
</td>
</tr>

and on your page where your selectbox is - just include the templates without putting divs or anything around them
0
How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

 

Author Comment

by:brucecrabtree
ID: 16636062
thanks. I'll try that. In the meantime, I found a way to do it in flashforms:

<cfsavecontent variable="MemberType_FK_onChange">
if (MemberType_FK.selectedItem.data == "0") {
      membergroup.visible = false;
} else {
      membergroup.visible = true;
}
</cfsavecontent>
<cfselect name="MemberType_FK" label="Member Type" onchange="#MemberType_FK_onChange#">
<option value="0" selected>Nonmember</option>
<option value="1">Pending</option>
<option value="2">Designated</option>
<option value="3">State Certified</option>
<option value="4">State Licensed</option>
<option value="5">Candidate</option>
<option value="6">Senior</option>
<option value="7">Honorary</option>
<option value="8">Affiliate</option>
</cfselect>
<cfformgroup type="page" id="membergroup" label="Members" visible="false">
<cfinput type="text" name="test" label="test">
<cfinput type="text" name="test2" label="test2">
<cfinput type="text" name="test3" label="test3">
<cfinput type="text" name="test4" label="test4">
</cfformgroup>
</cfformgroup>
0
 
LVL 25

Expert Comment

by:dgrafx
ID: 16636141
great!
0
 

Accepted Solution

by:
GranMod earned 0 total points
ID: 16884707
PAQed with points refunded (500)

GranMod
Community Support Moderator
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
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.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Despite its rising prevalence in the business world, "the cloud" is still misunderstood. Some companies still believe common misconceptions about lack of security in cloud solutions and many misuses of cloud storage options still occur every day. …

829 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