Solved

CFSELECT and Show/Hide DIV

Posted on 2012-04-03
8
762 Views
Last Modified: 2012-04-03
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>
0
Comment
Question by:swaggrK
  • 3
  • 3
  • 2
8 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 37801727
What is your question?
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37801731
Check out this jsfiddle:

The code is:

function toggleSubmit(caller) {

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

}

Open in new window

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37801864
...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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:swaggrK
ID: 37801877
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
 
LVL 52

Expert Comment

by:_agx_
ID: 37801936
Edit: Doh, just realized you're hiding the DIV not the select lists. Try the previous suggestion.
0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 150 total points
ID: 37802038
The newer version removes the unused select from the form.
0
 

Author Comment

by:swaggrK
ID: 37802051
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
 
LVL 52

Expert Comment

by:_agx_
ID: 37802101
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

786 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