Meteor-autoform: How To Update Select Options Based On Another Control

I've been trawling SO questions for an answer to something that should be very simple but for the life of me I cannot figure it out. Basically I have a meteor-autoform with two sel

Solution 1:

I had the same problem before that took me hours to resolve. You have to use simple schema to get the value of selected option like this using autoform's api call Autoform.getFieldValue:

Schemas.Store = new SimpleSchema({
center: {
    type: String,
    optional: true,
    autoform: {
        type: "select",
        options: function() {
            return Centers.find().map(function(c) {
                return {label: c.name, value: c._id};
            });
        }
    }
},
region: {
    type: String,
    optional: true,
    autoform: {
        type: "select",
        options: function() {
            if (Meteor.isClient) {
                var docId = '';

                docId = AutoForm.getFieldValue('storesForm', 'center');


               return Regions.find({center: docId}).map(function(c) {
                   return {label: c.name + ' (' + c.code + ')', value: c._id};
               });
            }
        }
    }
}, 
store_name: {
    type: String
} 
});

BTW, I'm still using autoform@4.2.2 due to issues encountered when using Autoform.getFieldValue in 5.0

Issue in 5.0.3 I've reported to aldeed: https://github.com/aldeed/meteor-autoform/issues/785#issuecomment-84600515

Solution 2:

I've managed to get this working - couple of things were wrong:

1. I needed to add an 'id' to the first select control so i could capture it's change event:

       {{> afQuickField name="elementId"id="elementId" options=elements}}
   

I then used a Reactive Dict variable which I then set in the changed event. A session variable would probably do the same job.

Template.processFormTemplate.events({
 'change #elementId': function() {
  dict.set('activeElementId', $('select#elementId').val());
}
});

and use this as a parameter in my categories helper:

categories: function(elementId) {
    returngetFormCategories(dict.get('activeElementId'));
  }

Hopefully this helps anyone else having a similar issue.