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

115 Posts

jimmyjazz Reply #11, 11 years, 2 months ago

This is a sample of the code that is failing and giving the javascript error in console:

////code for provinces (i cut down from 34 provinces to 4 for example here)////

<div class="[[!+fi.error.province:notempty=`control-group error`]]" id="province">
<label for="province">Province: [[!+fi.error.province:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
<h3>Collection Details</h3>
<p><span class="icon alt fa-arrow-circle-down"> Select collection Province from list <span class="icon alt fa-arrow-circle-down"></span></p>
<select name="province" value="[[!+fi.province]]" id="province" onchange="showForm()">
    <option value="0">Select Province</option>
    <option value="Anhui" [[!+fi.District:FormItIsSelected=`Anhui`]] >Anhui</option>
    <option value="Beijing" [[!+fi.District:FormItIsSelected=`Beijing`]] >Beijing</option>
	<option value="Chongqing" [[!+fi.District:FormItIsSelected=`Chongqing`]] >Chongqing</option>
    <option value="Fujian" [[!+fi.District:FormItIsSelected=`Fujian`]] >Fujian</option>
</select>
</div>

////partial code for first district called Anhui mapped to div id="f1", Beijing (not shown) is mapped to div id="f2" and so on.....////

<div id="f1" style="display:none" class="[[!+fi.error.District:notempty=`control-group error`]]">
<label for="District">District: [[!+fi.error.District:notempty=`<span class="label label-important">This is a required field.</span>`]]</label>
            <p><span class="icon alt fa-arrow-circle-down"> Select collection District for Anhui Province <span class="icon alt fa-arrow-circle-down"></span></p>
        <select name="District" value="[[!+fi.District]]" id="opts" onchange="showForm()">
            <option value="0">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>
            <option value="Chaohu" [[!+fi.District:FormItIsSelected=`Chaohu`]] >Chaohu</option>
            <option value="Chuzhou" [[!+fi.District:FormItIsSelected=`Chuzhou`]] >Chuzhou</option>
            <option value="Dongzhi" [[!+fi.District:FormItIsSelected=`Dongzhi`]] >Dongzhi</option>
        </select>
</div>


////partial code for javascript....the full code is 1200+ lines covering each province////

   <script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("province").value;
        if (selopt == Anhui) {
            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";
            document.getElementById("f7").style.display = "none";
			document.getElementById("f8").style.display = "none";
            document.getElementById("f9").style.display = "none";
            document.getElementById("f10").style.display = "none";
        }
    }
</script>

If I use the numbers instead of the names it works, maybe I do something wrong here?

5,888 Posts

Bruno17 Reply #12, 11 years, 2 months ago

did you try

if (selopt == "Anhui")

or

if (selopt == 'Anhui')

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

115 Posts

jimmyjazz Reply #13, 11 years, 2 months ago

Quote from: Bruno17 at Jul 27, 2015, 01:08 AM

did you try

if (selopt == "Anhui")

or

if (selopt == 'Anhui')

Hi Bruno,

I tried both variants; The good news is I no longer have any javascript warnings/issues in console

But, the District select drop down box no longer appears after select the Province :-(

This is how it looks now:

   <script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("province").value;
        if (selopt == "Anhui") {
            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";
            document.getElementById("f7").style.display = "none";
			document.getElementById("f8").style.display = "none";
            document.getElementById("f9").style.display = "none";
            document.getElementById("f10").style.display = "none";
			document.getElementById("f11").style.display = "none";
            document.getElementById("f12").style.display = "none";
            document.getElementById("f13").style.display = "none";
			document.getElementById("f14").style.display = "none";
            document.getElementById("f15").style.display = "none";
            document.getElementById("f16").style.display = "none";
			document.getElementById("f17").style.display = "none";
            document.getElementById("f18").style.display = "none";
            document.getElementById("f19").style.display = "none";
			document.getElementById("f20").style.display = "none";
            document.getElementById("f21").style.display = "none";
            document.getElementById("f22").style.display = "none";
			document.getElementById("f23").style.display = "none";
            document.getElementById("f24").style.display = "none";
            document.getElementById("f25").style.display = "none";
			document.getElementById("f26").style.display = "none";
            document.getElementById("f27").style.display = "none";
            document.getElementById("f28").style.display = "none";
			document.getElementById("f29").style.display = "none";
            document.getElementById("f30").style.display = "none";
            document.getElementById("f31").style.display = "none";
			document.getElementById("f32").style.display = "none";
            document.getElementById("f33").style.display = "none";
            document.getElementById("f34").style.display = "none";
        }
        if (selopt == "Beijing") {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "block";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f4").style.display = "none";

115 Posts

jimmyjazz Reply #14, 11 years, 2 months ago

Ok, I just found and corrected a number of basic errors I made (my bad).

These lines were incorrect:

var selopt = document.getElementById("province").value;
////changed ("province").value; to ("opts").value; and it worked////

            <select name="District" value="[[!+fi.District]]" id="opts" onchange="showForm()">
////Changed select name="District" - to - select name="f1" and so on for all sets of districts////

<select name="province" value="[[!+fi.province]]" id="province" onchange="showForm()">
////Changed id="province" - to -  id="opts"

However I still have one outstanding issue:

It is now fully functional apart from 'myEmailChunk' not displaying the district in the Email.

To get everything functional I changed the District 'div id=f1' to match the 'select name="f1"'
So now there is no common name for each of the 34 select drop downs that display the districts
So.....
For Beijing
'div id=f2' to match the 'select name="f2"'
For Chongquing
'div id=f3' to match the 'select name="f3"'

Below code for first set of Districts under Anhui:

////partial code for first list of districts under Anhui province mapped to div id="f1", Beijing province (not shown) is mapped to div id="f2" and so on.....////

<div id="f1" style="display:none" class="[[!+fi.error.District:notempty=`control-group error`]]">
            <p><span class="icon alt fa-arrow-circle-down"> Select collection District for Anhui Province <span class="icon alt fa-arrow-circle-down"></span></p>
        <select name="f1" id="opts" onchange="showForm()">
            <option value="0" >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>
            <option value="Chaohu" [[!+fi.District:FormItIsSelected=`Chaohu`]] >Chaohu</option>
            <option value="Chuzhou" [[!+fi.District:FormItIsSelected=`Chuzhou`]] >Chuzhou</option>
            <option value="Dongzhi" [[!+fi.District:FormItIsSelected=`Dongzhi`]] >Dongzhi</option>
        </select>
</div>

If I place this in myEmailChunk and select the Anhui the first province, then it will display the district of that province:

<p>District: [[+f1]]</p>

Now I have 34 possibilities without a common label I do not know how to get the selected [[+f1]] [[+f2]] [[+f3]] [[+f4]].....[[+33]] [[+34]] to display in the email that myEmailChunk sends.

Maybe there is a simple solution to this but I just spent a whole day searching and experimenting with code but I still cannot find an answer.

5,888 Posts

Bruno17 Reply #15, 11 years, 2 months ago

maybe you can change the name of the active select to 'district'

   <script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("province").value;
        if (selopt == Anhui) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f1").name = "district";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f2").name = "f2";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f3").name = "f3";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f4").name = "f4";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f5").name = "f5";
            document.getElementById("f6").style.display = "none";
            document.getElementById("f6").name = "f6";
            document.getElementById("f7").style.display = "none";
            document.getElementById("f7").name = "f7";
            document.getElementById("f8").style.display = "none";
            document.getElementById("f8").name = "f8";
            document.getElementById("f9").style.display = "none";
            document.getElementById("f9").name = "f9";
            document.getElementById("f10").style.display = "none";
            document.getElementById("f10").name = "f10";
        }
    }
</script>

and in the email-chunk then

<p>District: [[+district]]</p>

does this work?

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

115 Posts

jimmyjazz Reply #16, 11 years, 2 months ago

Quote from: Bruno17 at Jul 28, 2015, 10:50 AM

maybe you can change the name of the active select to 'district'

   <script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("province").value;
        if (selopt == Anhui) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f1").name = "district";
            document.getElementById("f2").style.display = "none";
            document.getElementById("f2").name = "f2";
            document.getElementById("f3").style.display = "none";
            document.getElementById("f3").name = "f3";
            document.getElementById("f4").style.display = "none";
            document.getElementById("f4").name = "f4";
            document.getElementById("f5").style.display = "none";
            document.getElementById("f5").name = "f5";
            document.getElementById("f6").style.display = "none";
            document.getElementById("f6").name = "f6";
            document.getElementById("f7").style.display = "none";
            document.getElementById("f7").name = "f7";
            document.getElementById("f8").style.display = "none";
            document.getElementById("f8").name = "f8";
            document.getElementById("f9").style.display = "none";
            document.getElementById("f9").name = "f9";
            document.getElementById("f10").style.display = "none";
            document.getElementById("f10").name = "f10";
        }
    }
</script>

and in the email-chunk then

<p>District: [[+district]]</p>

does this work?

Hi Bruno,

No, after make the change described for each active select; this just returns this line in the email:

District: [[+district]]

115 Posts

jimmyjazz Reply #17, 11 years, 2 months ago

Ok, I finally got this working

It's not the most elegant of solutions, but, the District output now appears in the email.

This is the new district field in myEmailChunk:

<p>District: [[+f1]][[+f2]][[+f3]][[+f4]][[+f5]][[+f6]][[+f7]][[+f8]][[+f9]][[+f10]][[+f11]][[+f12]][[+f13]][[+f14]][[+f15]][[+f16]][[+f17]][[+f18]][[+f19]][[+f20]][[+f21]][[+f22]][[+f23]][[+f24]][[+f25]][[+f26]][[+f27]][[+f28]][[+f29]][[+f30]][[+f31]][[+f32]][[+f33]][[+f34]]</p>

And I changed this line in each Province list of Districts:

<option value="0">Select District</option>

Merely changed it by removing the zero in each Province:

<option value="">Select District</option>

I'm pretty sure there is a better way to do this, but, I spent toooo much time trying to solve this & I gotta move on.

I want to thank paulp & Bruno for their input in helping me with all the previously listed issues.

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