Backbone-forms . js Doc Example: Onchange Populator: How can i hide the second select and show it after the change event?

Question

this is my code from the docs from which i want to learn from. in my opinion it would be cool to hide the second select and show it up, when the change event was fired. i tried some function injections without good results. can anyone give 2 cents to this issue?

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: { type: 'Text'}
        }
    }).render();

    form1.on('country:change', function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);

    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

score 2 · Accepted Answer · answered Jan 29 '13 at 20:25

form1.fields['message'].$el.hide();

after rendering and

form1.fields['message'].$el.toggle(); inside the on change function solves the issue.

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: {  
                //fieldAttrs: { style: 'width: 400px; height:300px;' }, 
                type: 'TextArea',
                fieldClass: 'message-input', 
                validators: [ 'required', /.{20,}/ ] 
            }
        }
    }).render();
    **form1.fields['message'].$el.hide();**

    *form1.on('country:change',* function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);
            **form1.fields['message'].$el.toggle();**
    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

Backbone-forms . js Doc Example: Onchange Populator: How can i hide the second select and show it after the change event?

1 Answers1