This is really useful! Thanks for sharing the code

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>

Just wondering, will this technique work with databound forms?
I was trying it earlier and it wasn't passing the values when the form was submitted.
No worries if it doesn't work, I've worked around it with javascript, I just wondered if it was worth going back and fixing it.

Hi I have this code

Code: Select all

<script type="text/javascript">
     function configureDropDownLists(ddl1,ddl2) {
    var colours = ['Black', 'White', 'Blue'];
    var shapes = ['Square', 'Circle', 'Triangle'];
    var names = ['John', 'David', 'Sarah'];

    switch (ddl1.value) {
        case 'Colours':
            ddl2.options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(ddl2, colours[i], colours[i]);
            }
            break;
        case 'Shapes':
            ddl2.options.length = 0; 
        for (i = 0; i < shapes.length; i++) {
            createOption(ddl2, shapes[i], shapes[i]);
            }
            break;
        case 'Names':
            ddl2.options.length = 0;
            for (i = 0; i < names.length; i++) {
                createOption(ddl2, names[i], names[i]);
            }
            break;
            default:
                ddl2.options.length = 0;
            break;
    }

}

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>

<select id="ddl2">
</select>

I place it couchcms databound like this

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<script type="text/javascript">
     function configureDropDownLists(ddl1,ddl2) {
    var colours = ['Black', 'White', 'Blue'];
    var shapes = ['Square', 'Circle', 'Triangle'];
    var names = ['John', 'David', 'Sarah'];

    switch (ddl1.value) {
        case 'Colours':
            ddl2.options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(ddl2, colours[i], colours[i]);
            }
            break;
        case 'Shapes':
            ddl2.options.length = 0; 
        for (i = 0; i < shapes.length; i++) {
            createOption(ddl2, shapes[i], shapes[i]);
            }
            break;
        case 'Names':
            ddl2.options.length = 0;
            for (i = 0; i < names.length; i++) {
                createOption(ddl2, names[i], names[i]);
            }
            break;
            default:
                ddl2.options.length = 0;
            break;
    }

}

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>
<cms:template title='Application Form' clonable='1'>
    <cms:editable name='test' required='1' type='dropdown' 
        opt_values=' Colours | Shapes | Names' 
    />
    <cms:hide><cms:editable name='test1' required='1' type='dropdown'   
   /></cms:hide>
   <select id="ddl2" ></select>
</cms:template>
<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <title>Employment Application</title>
   <link href="css/bootstrap.min.css" media="screen" rel="stylesheet">
   <link href="css/styles.css" media="screen" rel="stylesheet">
   
</head>
<body>
<div class="container">
   <div class="header">
      <h3>Employment Application</h3>
   </div>
   <div class="body">
    
        <cms:set submit_success="<cms:get_flash 'submit_success' />" />
        <cms:if submit_success >
            <div class="alert alert-success"><strong>Success:</strong> Your application has been submitted.</div>
        </cms:if>
            
      <cms:form 
            masterpage=k_template_name 
            mode='create'
            enctype='multipart/form-data'
            method='post'
            anchor='0'
            >
            
            <cms:if k_success >
            
                <cms:check_spam email=frm_email />
                
                <cms:db_persist_form 
                    _invalidate_cache='0'
                    _auto_title='1'
                />
                
                <cms:if k_success >
                    <cms:set_flash name='submit_success' value='1' />
                    <cms:redirect k_page_link /> 
                </cms:if>
            </cms:if>
            
            <cms:if k_error >
                <div class="alert alert-danger"><strong>Error:</strong> 
                    <cms:each k_error >
                        <br><cms:show item />
                    </cms:each>
                </div>
            </cms:if>
            
         <div class="form-group <cms:if k_error_first_name || k_error_last_name >has-error</cms:if>">
            <label class="control-label" for="first-name">Name <span class="required">*</span></label>
            <div class="row">
               <div class="col-xs-6">
                  <cms:input class="form-control" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))" name="test" placeholder="" type="bound" value="" />
               </div>
               <div class="col-xs-6">
                  <cms:hide><cms:input class="form-control" id="ddl2" name="test1" placeholder="Last" type="bound" value="" /></cms:hide>
                  <select id="ddl2" ></select>
               </div>
            </div>
         </div>
      
            
            <cms:if "<cms:not submit_success />" >
                <button class="btn btn-primary" type="submit">Submit Application</button>
            </cms:if>
            
      </cms:form>
   </div>
   <div class="footer">
      <p>&copy; <a href="http://www.couchcms.com/">CouchCMS</a> 2013</p>
   </div>
</div>
</body>
</html>
<?php COUCH::invoke(); ?>

After submit its say "Success: Your application has been submitted."

Where Test value is submitted successfully, but it wasn't passing the values test1

Can you help me to solve this?

Subhamoy

[KK]

@Subhamoy, the 'test1' editable dropdown region does not have any items defined (opt_values) -

Code: Select all

<cms:editable name='test1' required='1' type='dropdown'   />

Therefore it will always submit a blank value.

You'll have to define in it *all* the valid values it can be passed else Couch will reject the value set dynamically through JS.

Hi KK Sir
I tried it before like this

Code: Select all

<cms:editable name='test1' required='1' type='dropdown' 
   opt_values='Black|White|Blue|Square|Circle|Triangle|John|David|Sarah'   
   />
   <select id="ddl2" ></select>

But its always pass Black (Which one declares first).

Subhamoy

[KK]

See Subhamoy, the factor tying together the 'bound' region (which we have made hidden) and the shim HTML input is the 'name' parameter.

If you take a look at your code, you'll find that the <select> input has no 'name' -

Code: Select all

<cms:hide><cms:input class="form-control" id="ddl2" name="test1" placeholder="Last" type="bound" value="" /></cms:hide>

<select id="ddl2" ></select>

To make it work we need to make the 'name' value identical for both the entities.

So, prima fascie, it would appear that the following should work -

Code: Select all

<cms:hide><cms:input class="form-control" id="ddl2" name="test1" placeholder="Last" type="bound" value="" /></cms:hide>

<select id="ddl2" name='test1'></select>

Except that it doesn't

This, incidentally, was also the question of @ewanmc a few posts back in this thread (viewtopic.php?p=18115#p18115) that I happened to miss - how to use this technique with DataBound Forms.

Well, it has something to do with how a DataBound Form names the bound editable regions.
Temporarily remove the <cms:hide> from the bound region to let the input appear exactly how Couch renders it. Now inspect it (via developer console or view-source) and you'll find that the 'name' given by Couch to the dropdown has changed from 'test1' to 'f_test1'.

This is some idiosyncrasy of Couch we'll have to live with. The point is that with bound inputs, the 'name' of the input get prefixed with a 'f_' (you can always see the exact name by removing the cms:hide).

So now, in your case, if we make the code as follows you'll get the result you want -

Code: Select all

<cms:hide><cms:input class="form-control" id="ddl2" name="test1" placeholder="Last" type="bound" value="" /></cms:hide>

<select id="ddl2" name='f_test1'></select>

Hope it helps.

P.S. Make sure to define all the valid values in the editable region -

Code: Select all

<cms:editable name='test1' required='1' type='dropdown'
   opt_values='Black|White|Blue|Square|Circle|Triangle|John|David|Sarah'   
   />

Thanks KK Sir,
for your quick response and guidance.

its works perfectly as i want.

This, incidentally, was also the question of @ewanmc a few posts back in this thread (viewtopic.php?p=18115#p18115) that I happened to miss - how to use this technique with DataBound Forms.

Yes I read this and that's why I post my prob in this thread.

My endless thanks to you.

[KK]

You are always welcome