Dynamic Country-State-City using AutoForm and Collection2 package in Meteor

Question

I am using autoform and collection2 package and making a form in meteor. As of now i put some hard-coded option for country-state-city dropdown and insert-update is working fine. Now I want for the first time only country dropdown is enable other two are disable. Based on Country selection the states dropdown will populate and enable. Then based on State selection City Should Populate. I don't want to do this manually. Is there any way to do this using autoform / collection2 features??? My code sample is as follows:

Collection2 Schema:

country:{
    type: String,
    label : "Country",
    autoform: {
        afFieldInput: {
            type: "select"
        },
        options: function () {
            return [
                {label: 'Country1', value: 'Country1'},
                {label: 'Country2', value: 'Country2'},
                {label: 'Country3', value: 'Country3'},
                {label: 'Country4', value: 'Country4'}
            ];
        }
    }
},    
state:{
    type: String,
    label : "State",
    autoform: {
        afFieldInput: {
            type: "select"
        },
        options: function () {
            return [
                {label: 'State1', value: 'State1'},
                {label: 'State2', value: 'State2'},
                {label: 'State3', value: 'State3'},
                {label: 'State4', value: 'State4'}
            ];
        }
    }
},    
city:{
    type: String,
    label : "City",
    autoform: {
        afFieldInput: {
            type: "select"
        },
        options: function () {
            return [
                {label: 'City1', value: 'City1'},
                {label: 'City2', value: 'City2'},
                {label: 'City3', value: 'City3'},
                {label: 'City4', value: 'City4'}
            ];
        }
    }
},

HTML ::

{{> afQuickField name='country' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}
{{> afQuickField name='state' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}
{{> afQuickField name='city' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}

Any Help??

Answer 1

I think this is somewhat the idea you have, https://jsfiddle.net/bdhacker/eRv2W/ // Countries var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica"...

// States var s_a = new Array(); s_a[0] = ""; s_a[1] = "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";...

you can extract the data from this and adjust to your app. Hope it helps

Answer 2

i think you can set the inputs of state and city to be disabled

country:{
    type: String,
        label : "Country",
        autoform: {
        afFieldInput: {
            type: "select"
        },
        options: function () {
            return [
                {label: 'Country1', value: 'Country1'},
                {label: 'Country2', value: 'Country2'},
                {label: 'Country3', value: 'Country3'},
                {label: 'Country4', value: 'Country4'}
            ];
        }
    }
},
state:{
    type: String,
        label : "State",
        autoform: {
        afFieldInput: {
            type: "select",
            disabled:true
        },
        options: function () {
            return [
                {label: 'State1', value: 'State1'},
                {label: 'State2', value: 'State2'},
                {label: 'State3', value: 'State3'},
                {label: 'State4', value: 'State4'}
            ];
        }
    }
},
city:{
    type: String,
        label : "City",
        autoform: {
        afFieldInput: {
            type: "select",
            disabled:true
        },
        options: function () {
            return [
                {label: 'City1', value: 'City1'},
                {label: 'City2', value: 'City2'},
                {label: 'City3', value: 'City3'},
                {label: 'City4', value: 'City4'}
            ];
        }
    }
},

and use Template event to enable the options

Template.YOURTEMPLATENAME.events({
    'change input[name="country"]' :function(){
        if ($('input[name="country"]').value() != ''){
            $('input[name="state"]').attr('disabled','');
        }else {
            $('input[name="state"]').attr('disabled','disabled');
        }
    },
    'change input[name="state"]' :function(){
        if ($('input[name="state"]').value() != ''){
            $('input[name="city"]').attr('disabled','');
        }else {
            $('input[name="city"]').attr('disabled','disabled');
        }
    }
});