CFSELECT and Show/Hide DIV

If I choose option value 1, from the "First select"
results from both div id="d0" and div id="d1" are sent via a form.

First select:
<SELECT id="ptype" NAME="business_category_main" onchange="toggleSubmit(this)">
<option value="1">Culture, Entertainment & Recreation</option>
<option value="2">Drinking & Dining</option>
</select>


Second select:
<div id="d0" style="display:block">
<select  class="wpcf7-text textbox" name="business_subcategory">
<option VALUE="1">Art Studios, Galleries & Artists</option>
<option VALUE="2">Movie Theaters</option>
<option VALUE="3">Fitness, Sports & Recreation</option>
<option VALUE="4">Performance Venues</option>
<option VALUE="5">Travel & Lodging</option>
</select></div>
<div id="d1" style="display:none">
<select  class="wpcf7-text textbox" name="business_subcategory">
<option VALUE="6">Cafes & Bakeries</option>
<option VALUE="7">Catering</option>
<option VALUE="8">Delis & Grocers</option>
<option VALUE="9">Restaurants & Eateries</option>
<option VALUE="10">Bars, Taverns & Lounges</option>
<option VALUE="11">Wine, Liquor & Spirits</option>
</select></div>
swaggrKAsked:
Who is Participating?
 
ProculopsisCommented:
The newer version removes the unused select from the form.
0
 
_agx_Commented:
What is your question?
0
 
ProculopsisCommented:
Check out this jsfiddle:

The code is:

function toggleSubmit(caller) {

    $("#d0").toggle();
    $("#d1").toggle();

}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ProculopsisCommented:
...or jsfiddle if you want the select removed:

The code is:

function toggleSubmit(caller) {

    $("#d0").toggle();
    $("#d1").toggle();

}

function onSubmit() {

    $("#d0").not(":visible").remove();
    $("#d1").not(":visible").remove();

}

Open in new window

0
 
swaggrKAuthor Commented:
hmm... testing what u sent. I forgot to include the following in my initial post...
Basically, it is not submitting just ONE result but a result from "d0" and "d1"

<script type='text/javascript'>

function toggleSubmit(obj){

count=0
while(document.getElementById("d"+count)){
document.getElementById("d"+count).style.display="none"
count++
}
document.getElementById("d"+obj.selectedIndex).style.display="block"

}
</script>
0
 
_agx_Commented:
Edit: Doh, just realized you're hiding the DIV not the select lists. Try the previous suggestion.
0
 
swaggrKAuthor Commented:
AGX, that may work, but the results are submitted as followed...

1,6

With 1,6 being
<option VALUE="1">Art Studios, Galleries & Artists</option>
and
<option VALUE="6">Cafes & Bakeries</option>

Not sure how I would write a cfif that would take the 1 or the 6


<div id="d0" style="display:block">
<select  class="wpcf7-text textbox" name="business_subcategory">
<option VALUE="1">Art Studios, Galleries & Artists</option>
<option VALUE="2">Movie Theaters</option>
<option VALUE="3">Fitness, Sports & Recreation</option>
<option VALUE="4">Performance Venues</option>
<option VALUE="5">Travel & Lodging</option>
</select></div>
<div id="d1" style="display:none">
<select  class="wpcf7-text textbox" name="business_subcategory">
<option VALUE="6">Cafes & Bakeries</option>
<option VALUE="7">Catering</option>
<option VALUE="8">Delis & Grocers</option>
<option VALUE="9">Restaurants & Eateries</option>
<option VALUE="10">Bars, Taverns & Lounges</option>
<option VALUE="11">Wine, Liquor & Spirits</option>
</select></div>
0
 
_agx_Commented:
Actually I missed the earlier part about hiding the div, not the lists. Try hiding the select lists instead. I believe they won't show up on the action page if they're not visible.
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.