When Select From Drop Down List How To Make Another Drop Down List Automatically Appear

115 Posts

jimmyjazz Reply #1, 11 years, 2 months ago

In Formit, I have a drop down list containing all 34 Provinces in China.
I need another drop down list for Districts to appear after a Province has been chosen.

For Example, if Shanghai is chosen as a Province then a new drop down will appear with the list of Shanghai districts in it.
So although there will be 34 different lists of Districts representing each province only the drop down list of districts for the selected province will appear.

This is the (partial) code for the provinces:

        <div class="[[!+fi.error.Province:notempty=`control-group error`]]" id="Province">
        <label for="dep">Province (select collection province from drop down list):</label>
        <select name="Province">
        <option value="" disabled selected>Select Province</option>
        <option value="Anhui" [[!+fi.Province:FormItIsSelected=`Anhui`]] >Anhui</option>
        <option value="Beijing" [[!+fi.Province:FormItIsSelected=`Beijing`]] >Beijing</option>
        <option value="Chongqing" [[!+fi.Province:FormItIsSelected=`Chongqing`]] >Chongqing</option>
        </select>
        </div>

This is the (partial) code for the list of Districts in the first 2 Provinces:

<div class="[[!+fi.error.District:notempty=`control-group error`]]" id="District">
        <label for="District">Anhui (select collection district from drop down list):</label>
        <select name="District">
        <option value="" disabled selected>Select District</option>
        <option value="Anqing" [[!+fi.District:FormItIsSelected=`Anqing`]] >Anqing</option>
        <option value="Bengbu" [[!+fi.District:FormItIsSelected=`Bengbu`]] >Bengbu</option>
        <option value="Bozhou" [[!+fi.District:FormItIsSelected=`Bozhou`]] >Bozhou</option>
        </select>
        </div>

And:

        <div class="[[!+fi.error.District:notempty=`control-group error`]]" id="District">
        <label for="District">Beijing (select collection District from drop down list):</label>
        <select name="District">
        <option value="" disabled selected>Select District</option>
        <option value="Beijing" [[!+fi.District:FormItIsSelected=`Beijing`]] >Beijing</option>
        <option value="Huairou" [[!+fi.District:FormItIsSelected=`Huairou`]] >Huairou</option>
        <option value="Miyun" [[!+fi.District:FormItIsSelected=`Miyun`]] >Bozhou</option>
        </select>
        </div>

The province list and all 34 district lists are saved in chunks.

On initial page load I want only the Province list to be visible (currently all the District lists are also visible)

My question is this:

What is the code to use to make a single district list appear upon selection of a province?

I'm kinda assuming this can be done in a hook but I'm unsure how to code it.

This question has been answered by paulp. See the first response.

1,572 Posts

Paulp Reply #2, 11 years, 2 months ago

Your probable going to need to do this with javascript, something like http://jsfiddle.net/7Shsy/117/

115 Posts

jimmyjazz Reply #3, 11 years, 2 months ago

Hi Paulp,

Thanks for that, I've been having a play with the fiddle:

<p>Select collection Province from list</p><br>
<select id="opts" onchange="showForm()">
    <option value="0">Select Option</option>
    <option value="1">Anhui</option>
    <option value="2">Beijing</option>
</select>

<div id="f1" style="display:none">
        <form name="form1">
        <p>Select collection district from Anhui Province</p>
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1" [[!+fi.District:FormItIsSelected=`Anqing`]] >Anqing</option>
            <option value="2" [[!+fi.District:FormItIsSelected=`Bengbu`]] >Bengbu</option>
        </select>
    </form>
</div>

<div id="f2" style="display:none">
    <form name="form2">
        <p>Select collection district from Beijing Province</p>
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1" [[!+fi.District:FormItIsSelected=`Beijing`]] >Beijing</option>
            <option value="2" [[!+fi.District:FormItIsSelected=`Huairou`]] >Huairou</option>
        </select>
    </form>
</div>

Am I correct in thinking I could do like this?
It works in the fiddle and in isolation on a test web page.

I've never used Formit before and I was wondering if I add a variety of fields below these then, upon hitting submit, all the data will be sent via email with adding in an option to store in a database?

I'm asking because it looks likes each drop down list is a separate form and my experience with Formit began today.

discuss.answer

1,572 Posts

Paulp Reply #4, 11 years, 2 months ago

You don't need the additional forms, that was just an example I found for you to have a look at

So for example the following will still work:

<form>

<select id="opts" onchange="showForm()">
    <option value="0">Select Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<div id="f1" style="display:none">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 1A</option>
            <option value="2">Option 1B</option>
        </select>
</div>

<div id="f2" style="display:none">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Option</option>
            <option value="1">Option 2A</option>
            <option value="2">Option 2B</option>
        </select>
</div>
</form>

<script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display = "block";
            document.getElementById("f1").style.display = "none";
        }
        if (selopt == 0) {
            document.getElementById("f2").style.display = "none";
            document.getElementById("f1").style.display = "none";
        }
    }
</script>

115 Posts

jimmyjazz Reply #5, 11 years, 2 months ago

Ok, thank you for your input

I will try implementing this.

1,572 Posts

Paulp Reply #6, 11 years, 2 months ago

I've just done a working example for this so will post it for your reference, I'm using pdoResources to pull in the selects from document titles.

Chunk: CommentForm

[[!FormIt?
    &hooks=`spam,email,redirect`
    &emailTpl=`MyCommentChunk`
    &emailFrom=`[email protected]`
    &[email protected]`
    &emailSubject =`Comment Form Submitted on your website`
    &redirectTo=`67`
    &validate=`name:required`
]]
[[!+fi.success:notempty=`<div class="Selector Success">[[!+fi.successMessage]]</div>`]]
    [[!+fi.error_message:notempty=`<div class="Selector Error">[[!+fi.error_message]]</div>`]]
<form id="" class="subscribe_form form" name="subscribe_form" method="post" action="[[~[[*id]]]]">
    <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]" />
    <div>
        <span class="error">[[!+fi.error.name]]</span>
        <input type="text" name="name" id="name" placeholder="Name*" value="[[!+fi.name]]" />
    </div>
    <div>
        <span class="scheme">[[!+fi.error.scheme]]</span>
        <select name="scheme" id="opts" onchange="showForm()">
            <option value="0">Select a Location</option>
            <option value="1">Wirral</option>
            <option value="2">Cheshire</option>
            <option value="3">Manchester</option>
            <option value="4">Staffordshire</option>
            <option value="5">Shropshire</option>
            <option value="6">Yourkshire</option>
        </select>
        <div id="f1" style="display:none">
            <select name="Wirral" id="opts" onchange="showForm()">
                <option value="">Select from Wirral</option>
                    [[!pdoResources?
                        &parents=`7`
                        &depth=`0`
                        &tpl=`select2`
                        &sortby=`menuindex`
                        &sortdir=`ASC`
                        &limit=`1001`
                    ]]
            </select>
        </div>
 
        <div id="f2" style="display:none">
            <select name="Cheshire" id="opts" onchange="showForm()">
                <option value="">Select from Cheshire</option>
                [[!pdoResources?
                    &parents=`8`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f3" style="display:none">
            <select name="Manchester" id="opts" onchange="showForm()">
                <option value="">Select from Manchester</option>
                [[!pdoResources?
                    &parents=`9`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f4" style="display:none">
            <select name="Staffordshire" id="opts" onchange="showForm()">
                <option value="">Select from Staffordshire</option>
                [[!pdoResources?
                    &parents=`10`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f5" style="display:none">
            <select name="Shropshire" id="opts" onchange="showForm()">
                <option value="">Select from Shropshire</option>
                [[!pdoResources?
                    &parents=`11`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f6" style="display:none">
            <select name="Yorkshire" id="opts" onchange="showForm()">
                <option value="">Select from Yorkshire</option>
                [[!pdoResources?
                    &parents=`9`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
    </div>
    <div>
        <textarea name="Enquiry" id="Enquiry" cols="55" rows="7" placeholder="Comments" value="[[!+fi.Enquiry]]">[[!+fi.Enquiry]]</textarea>
    </div>
    <div class="form-buttons">
        <input value="Post Comment" class="btn btn-success comment-btn" type="submit" />
    </div>
</form>

<script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "block";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 3) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "block";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 4) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "block";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 5) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "block";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 6) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "block";
        }
        if (selopt == 0) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
    }
</script>

Chunk: select2

<option value="[[+pagetitle]]">[[+pagetitle]]</option>

Chunk: MyCommentChunk ( the email that is sent )

 [[+name]] has made a comment about the following house: <br />
 <br />
<strong>[[+Wirral]]</strong>
<strong>[[+Cheshire]]</strong>
<strong>[[+Manchester]]</strong>
<strong>[[+Staffordshire]]</strong>
<strong>[[+Shropshire]]</strong>
<strong>[[+Yorkshire]]</strong>
<br /><br />
[[+Enquiry]]

115 Posts

jimmyjazz Reply #7, 11 years, 2 months ago

Oh wow! Thanks for that.
I think that could be very useful.
I'm currently wading through 600+ districts mapping them to the 34 districts, I've already completed 20 of them & all working well so far.
The javascript file just for this mounted to 1200+ lines!
I'm just wondering, if I used the PDO method you posted what would be the benefit?

115 Posts

jimmyjazz Reply #8, 11 years, 2 months ago

Quote from: paulp at Jul 21, 2015, 08:50 AM

I've just done a working example for this so will post it for your reference, I'm using pdoResources to pull in the selects from document titles.

Chunk: CommentForm

[[!FormIt?
    &hooks=`spam,email,redirect`
    &emailTpl=`MyCommentChunk`
    &emailFrom=`[email protected]`
    &[email protected]`
    &emailSubject =`Comment Form Submitted on your website`
    &redirectTo=`67`
    &validate=`name:required`
]]
[[!+fi.success:notempty=`<div class="Selector Success">[[!+fi.successMessage]]</div>`]]
    [[!+fi.error_message:notempty=`<div class="Selector Error">[[!+fi.error_message]]</div>`]]
<form id="" class="subscribe_form form" name="subscribe_form" method="post" action="[[~[[*id]]]]">
    <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]">
    <div>
        <span class="error">[[!+fi.error.name]]</span>
        <input type="text" name="name" id="name" placeholder="Name*" value="[[!+fi.name]]">
    </div>
    <div>
        <span class="scheme">[[!+fi.error.scheme]]</span>
        <select name="scheme" id="opts" onchange="showForm()">
            <option value="0">Select a Location</option>
            <option value="1">Wirral</option>
            <option value="2">Cheshire</option>
            <option value="3">Manchester</option>
            <option value="4">Staffordshire</option>
            <option value="5">Shropshire</option>
            <option value="6">Yourkshire</option>
        </select>
        <div id="f1" style="display:none">
            <select name="Wirral" id="opts" onchange="showForm()">
                <option value="">Select from Wirral</option>
                    [[!pdoResources?
                        &parents=`7`
                        &depth=`0`
                        &tpl=`select2`
                        &sortby=`menuindex`
                        &sortdir=`ASC`
                        &limit=`1001`
                    ]]
            </select>
        </div>
 
        <div id="f2" style="display:none">
            <select name="Cheshire" id="opts" onchange="showForm()">
                <option value="">Select from Cheshire</option>
                [[!pdoResources?
                    &parents=`8`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f3" style="display:none">
            <select name="Manchester" id="opts" onchange="showForm()">
                <option value="">Select from Manchester</option>
                [[!pdoResources?
                    &parents=`9`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f4" style="display:none">
            <select name="Staffordshire" id="opts" onchange="showForm()">
                <option value="">Select from Staffordshire</option>
                [[!pdoResources?
                    &parents=`10`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f5" style="display:none">
            <select name="Shropshire" id="opts" onchange="showForm()">
                <option value="">Select from Shropshire</option>
                [[!pdoResources?
                    &parents=`11`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
        <div id="f6" style="display:none">
            <select name="Yorkshire" id="opts" onchange="showForm()">
                <option value="">Select from Yorkshire</option>
                [[!pdoResources?
                    &parents=`9`
                    &depth=`0`
                    &tpl=`select2`
                    &sortby=`menuindex`
                    &sortdir=`ASC`
                    &limit=`1001`
                ]]
            </select>
        </div>
    </div>
    <div>
        <textarea name="Enquiry" id="Enquiry" cols="55" rows="7" placeholder="Comments" value="[[!+fi.Enquiry]]">[[!+fi.Enquiry]]</textarea>
    </div>
    <div class="form-buttons">
        <input value="Post Comment" class="btn btn-success comment-btn" type="submit">
    </div>
</form>

<script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "block";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 3) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "block";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 4) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "block";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 5) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "block";
            document.getElementById("f6").style.display = "none";
        }
        if (selopt == 6) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "block";
        }
        if (selopt == 0) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }
    }
</script>

Chunk: select2

<option value="[[+pagetitle]]">[[+pagetitle]]</option>

Chunk: MyCommentChunk ( the email that is sent )

 [[+name]] has made a comment about the following house: 

 

<strong>[[+Wirral]]</strong>
<strong>[[+Cheshire]]</strong>
<strong>[[+Manchester]]</strong>
<strong>[[+Staffordshire]]</strong>
<strong>[[+Shropshire]]</strong>
<strong>[[+Yorkshire]]</strong>



[[+Enquiry]]

Hi paulp,

I followed your example and the form works perfectly, so much appreciated

I do have another question though:

The email chunk does not display the selected field, in the email it displays the value number.

The equivalent in your example would be if I selected 'Manchester' the result in the email is '3', it does not display the word Manchester.

Is there anything I can adjust to force it to display the selected place name and not the value 'number'?

5,888 Posts

Bruno17 Reply #9, 11 years, 2 months ago

can't you change the values to names, like:

            <option value="0">Select a Location</option>
            <option value="Wirral">Wirral</option>
            <option value="Cheshire">Cheshire</option>
            <option value="Manchester">Manchester</option>
            <option value="Staffordshire">Staffordshire</option>
            <option value="Shropshire">Shropshire</option>
            <option value="Yourkshire">Yourkshire</option>

and change the javascript - parts to

        if (selopt == "Wirral") {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }

and so on ?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

115 Posts

jimmyjazz Reply #10, 11 years, 2 months ago

Quote from: Bruno17 at Jul 26, 2015, 12:18 PM

can't you change the values to names, like:

            <option value="0">Select a Location</option>
            <option value="Wirral">Wirral</option>
            <option value="Cheshire">Cheshire</option>
            <option value="Manchester">Manchester</option>
            <option value="Staffordshire">Staffordshire</option>
            <option value="Shropshire">Shropshire</option>
            <option value="Yourkshire">Yourkshire</option>

and change the javascript - parts to

        if (selopt == "Wirral") {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f6").style.display = "none";
        }

and so on ?

Hi Bruno,
Thanks for taking the time to respond

When I try like this, after select 'Province' i get an 'Uncaught ReferenceError: showForm is not defined' in console:

<script>(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {showForm()
};}}}})</script>

('showform' is the name of the chunk containing the javascript)

So after select the province this error occurs and the district select box does not open, but, I find if I replace the province names & district names with numbers like in the example (in the 'value' field) everything works error free.

I'll post sample code in next post.....

Answered When Select From Drop Down List How To Make Another Drop Down List Automatically Appear