Hi,

I'm working on a filtered search form inspired by this thread: http://www.couchcms.com/forum/viewtopic.php?f=8&t=7620

It's quite amazing that all this can be done with Couch.

I have quite a lot of options to search for though. Therefore I would like to show dropdown B only if the value of dropdown A is X

for now I have done this in the following manner:

Code: Select all

<cms:input type="dropdown" name="dropdownA" opt_values="none=-| X |Y " opt_selected='-' />

<cms:if frm_dropdownA='X'>

      <cms:input type="dropdown" name="dropdownB" opt_values=" none=- | X |Y | opt_selected='-'/>
 
<cms:else/>
            
        <span class="hidden">
                 <cms:input type="dropdown" name="dropdownB" opt_values=" none=- | X |Y | opt_selected='-'/>
        </span>
            
                </cms:if>

This works nicely, the hidden dropdown is necessary because I need a value for the search string later on.

The downside of this solution is that the user has to click "submit" before the next dropdown is shown.

I've tried the following code:

Code: Select all

<cms:if dropdownA=='X'>

      <cms:input type="dropdown" name="dropdownB" opt_values=" none=- | X |Y | opt_selected='-'/>
 
<cms:else/>
            
        <span class="hidden">
                 <cms:input type="dropdown" name="dropdownB" opt_values=" none=- | X |Y | opt_selected='-'/>
        </span>
            
                </cms:if>

But that doesn't work.

Now I know there are some JavaScript solutions for this but I'm not that much of an expert in Java.

Also I've found a way to solve this in CSS, but then you would need an ID for each option (instead of one ID for the input) , which I couldn't do using the cms:input tag. (maybe this is possible anyhow?).

Does anyone have any suggestions?

[KK]

Hi Saskia,

As you have noted yourself, this problem needs a front-end JavaScript solution.
I, as it happens, am a dud when it comes to JS programming
Perhaps @cheesypoof or others would be able to give you some concrete suggestions.

haha ok thanks KK

I'll dig a little deeper in JS then. I'll let you know.

[cheesypoof]

You could give https://github.com/tuupola/jquery_chained a look and see if it meets your requirements.

Thank you Cheesypoof, this indeed looks like the code I need.

This code needs classes to be added to the separate options, does that mean I can't use the couch cms:input tag?

[cheesypoof]

I think in this case you would need to wrap the non-first cms:inputs in cms:hide and create the markup for those <select>s and <option>s manually:

Code: Select all

<cms:input id='manufacturer' name='manufacturer' opt_values='-- Select Manufacturer --=- | Audi=audi | BMW=bmw' type='dropdown'/>

<cms:hide>
    <cms:input id='series' name='series' opt_values='-- Select Series --=- | A3=a3 | A4=a4 | A5=a5 | 3 Series=3-series | 4 Series=4-series | 5 Series=5-series' type='dropdown'/>
</cms:hide>

<select id="series" name="series">
    <option class="audi bmw" value="-">-- Select Series --</option>
    <option class="audi" value="a3">A3</option>
    <option class="audi" value="a4">A4</option>
    <option class="audi" value="a5">A5</option>
    <option class="bmw" value="3-series">3 Series</option>
    <option class="bmw" value="4-series">4 Series</option>
    <option class="bmw" value="5-series">5 Series</option>
</select>

Are the hidden and manually created dropdowns linked? I'm not really sure I understand the hidden part...

[KK]

Are the hidden and manually created dropdowns linked? I'm not really sure I understand the hidden part.

Yes, the two are linked via the common 'name' parameter ('series' in this case).

It'll become clear once you understand what the cms:hide tag does -
this tag 'executes' everything contained within it *but* does not output anything.

So, if we were to place a cms:input tag within cms:hide, the cms:input tag will execute but will not output its HTML markup.

See there are always two parts to every cms:input element we use in cms:form
1. The presentation (i.e. the markup HTML)
2. The server side processing of the submitted values (validation, setting variables etc.)

By placing the cms:input tag within cms:hide, we are effectively turning off the first part of it and only using the second i.e. the server side processing.

This frees us to create the markup ourselves using regular HTML (taking care to use the same 'name' as that of the hidden cms:input).

When the form gets submitted it is actually our handcoded input that gets submitted. However, on the server side the hidden cms:input (courtesy the common name) kicks in and does all the processing.

Hope I was able to explain things properly

Oh that's really cool. This expands the couch possibilities even more. Thanks for your explanation KK. I'm confident that this will work really well for my problem. Thanks both!

I've got it working now ^^

I ended up using another JavaScript script. To me this one was more easy to modify to my own wishes.

This is the code:

Code: Select all

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <cms:form name="specsearch" id="specsearch" method="post" action="<cms:show k_site_link/>specsearch.php">

                <cms:hide>
                <cms:input type="dropdown" name="gram" opt_values="Gram unknown=-| Gram-positive | Gram-negative " opt_selected='-' /><br />
                </cms:hide>
    
                <cms:hide>
                <cms:input type="dropdown" name="shape" opt_values=" shape unknown=- | rods | cocci " opt_selected='-' /><br />
                </cms:hide>
      
                <cms:hide>
                <cms:input type="dropdown" name="specshape" opt_values=" specific shape unknown=- | coccoid | tiny rods | medium rods |  large rods | difteroid | branched | streptococci | staphylococci | diplococci " opt_selected='-'/><br />
                </cms:hide>

<table align="center">
            <tr>
             
              <td>
              <span class="custom-dropdown">
              <select name="gram" class="gram">
                <option value="">Gram</option>
                <option value="Gram-positive">Gram positive</option>
                <option value="Gram-negative">Gram negative</option>
              </select>
              </span>
              </td>
              <td>
              <span class="custom-dropdown">
              <select name="shape" class="shape">
                <option value="-">shape unknown</option>
                <option value="rods">rods</option>
                <option value="cocci">cocci</option>
              </select>
              </span>
              </td>
            </tr>
            
            <tr class="tr_Gram-positiverods method_options">
            <td>
            <span class="custom-dropdown">
              <select name="specshape" id="second">
                    <option name="specshape" value="specific shape unknown">specific shape unknown</option>
                   <option name="specshape" value="large rods">large rods</option>
                    <option name="specshape" value="tiny rods">tiny rods</option>
                    <option name="specshape" value="medium rods">medium rods</option>
                    <option name="specshape" value="difteroid">difteroid</option>
                    <option name="specshape" value="branched">branched</option>
              </select>
              </span>
              </td>
            </tr>

            <tr class="tr_Gram-negativerods method_options">
              <td>
              <span class="custom-dropdown">
              <select name="specshape" id="second">
                   <option name="specshape" value="specific shape unknown">specific shape unknown</option>
                   <option name="specshape" value="coccoid">coccoid</option>
                    <option name="specshape" value="tiny rods">tiny rods</option>
                    <option name="specshape" value="medium rods">medium rods</option>
              </select>
              </span>
              </td>
            </tr>

        </table>
        
                
    

    <cms:input name="submit" type="submit" value="Search" />
    </div>
</cms:form>
<script>
$(document).ready(function(){

    $('.gram, .shape').on('change', function() {         

        $('tr.method_options').hide();
        var gramVal = $('.gram').val();
      var shapeVal = $('.shape').val();
      var gramShape = gramVal+shapeVal;
      $('.tr_' + gramShape).show();

    });

});

</script>

sorry I didn't abstract the code, but I think it'll still be understandable.