Link to home
Start Free TrialLog in
Avatar of lulu50
lulu50Flag for United States of America

asked on

Select box

Hi,

How can I in coldfusion if I select from the select box then populate the data

so, I don't want the select to get populated when I open the page

what should I say here

<cfif isdefined('form.?) can I do form.GetState  GetSate is a dropdown box.

<select name="GetCity" style="width: 180px;height:200px;" size="8" multiple="multiple"/>
<cfoutput>
<cfloop from="1" to="#listlen(myCitiesList)#" index="i" step="3">
<option value="#listgetat(myCitiesList,i+1)#">#listgetat(myCitiesList,i+2)#</option>
</cfloop>
</cfoutput>
</select>

http://www.churchesbulletin.com/

what I want to do is when the user open this site the page should not populate the city data unless the user select the state.  
Avatar of ravi_bachwala
ravi_bachwala
Flag of United States of America image

You can do it in 2-ways:
1. on form submission i.e when you select the state generate the city drop down.
2. on Using of Custom Tag with all the city and generated but when state is selected fire the event to the custom tag which pulls the data for the City.

Thanks
Ravi
Avatar of gdemaria

Ravi covered two options, a third could be using bind on the CFSELECT tags.

so all three options..

1) select the state, submit the form, show the cities (easiest approach for coding, worst for user)
2) use custom tag TWOSELECTSRELATED to fetch and populate two dependant select statements  (good use experience, harder to code)
3) use cfc and CFSELECT with Binding  (good user experience, harder to code, need to setup a cfc, not bad if you've done it before)



The caveat to gdemaria's addition would be the version of ColdFusion you are using... are you using CF8 or CF9 at least?  If so I'd definitely recommend the binding option.  Either that or if not you could do the same thing with an earlier CF version (i.e. MX,7) by utilizing jQuery or extJS ajax frameworks - although if all you're doing is this that might be overkill.

Ben Forta has a nice example at his blog for CF8 (same works for CF9).

There's also an example for earlier versions with pure javascript and a custom tag (although I haven't tried it because I still prefer gdemaria's third suggestion).  Just wanted to give you some referrences.
Yes, you can use CFIF like this:
<form name="FRMAcc" action="" method="post" enctype="multipart/form-data">
<select name="DispStateBox" style="width: 180px;height:200px;" size="8"  onChange="this.form.submit()" >
  <option value="22">Michigan (MI)</option>
  <option value="35">Ohio (OH)</option>
</select>

<cfif isdefined("form.DispStateBox")>

<select name="GetCity" style="width: 180px;height:200px;" size="8" multiple="multiple"/>
<cfoutput>
<cfloop from="1" to="#listlen(myCitiesList)#" index="i" step="3">
  <cfif listgetat(myCitiesList,i) EQ form.DispStateBox >
<option value="#listgetat(myCitiesList,i+1)#">#listgetat(myCitiesList,i+2)#</option>
  </cfif>
</cfloop>
</cfoutput>
</select> 

</cfif>

Open in new window

Please note two changes on your FORM:
1.) You do not have a SUBMIT button on your form and therefore I changed your State select onChange to do the submit();
2.) You cannot select multiple State from the Cities list and therefore I removed that attribute from the <select>


ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lulu50

ASKER

Zvonko

by having this at the end

setOptionCity();

it means it is going to execute the function without the onclick event but I want it to only execute the function if the user selected a state.

I want the city to be hidden when the user come to the site and when they select a state it will become available for them to select.

Thank you
Avatar of lulu50

ASKER

I don't want it to populate data to the city unless the user selected a state.

I have a lots of data it will take for ever to upload.
Avatar of lulu50

ASKER

I looked at the view source and I see the data got populated
how can I have it not to populate the data and be hidden unless the user select from the state?
Avatar of lulu50

ASKER

Great!!!!
I did this
<cfif isdefined("form.DispStateBox")>
now I don't have the data populated unless the user select from the state.

now the only issue is that I needed the city to be hidden unless the user select on the state.
Simply do this:
setOptionCity();

Open in new window

Avatar of lulu50

ASKER

Zvonko

I don't understand?
Avatar of lulu50

ASKER

do you mean just to call the function
Avatar of lulu50

ASKER

Zvonko

Great!!

it works!!!!

Thank you and Thank you for your help
Avatar of lulu50

ASKER

Thank you
You are velcome, but you did it by the "visibility" trick <|:-)