Update form elements based on user input

by scriptstar

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>

CSS

/* Date */
.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */
.bbf-datetime select {
  width: 4em;
}


/* List */
.bbf-list .bbf-add {
  margin-top: -10px
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}


/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

JavaScript

$(function() {
    var models = {
        'Toyota': ['', 'Auris', 'Aygo', 'Prius'],
        'Lexus': ['', 'L1', 'L2', 'L3', 'L4'],
        'Auris': ['', '10/10/2009', '10/10/2010'],
        'Aygo': ['', '10/10/2011', '10/10/2012'],
        'Prius': ['', '10/10/2007', '10/10/2008'],
        'L1': ['', '10/10/2012', '10/10/2013'],
        'L2': ['', '10/10/2013', '10/10/2014']
    };

    //The form
    var form = new Backbone.Form({
        schema: {
            brand: {
                type: 'Select',
                options: ['Toyota', 'Lexus']
            },
            model: {
                type: 'Select',
                options: models.Toyota
            },
            publishedDate: {
                type: 'Select',
                options: models.Aygo
            }
        }
    }).render();

    form.on('model:change', function(form, modelEditor) {
        var model= modelEditor.getValue(),
            newOptions = models[model];
        
        if (newOptions != null){
           form.fields.publishedDate.editor.setOptions(newOptions);
        }
        
        else{
            form.fields.publishedDate.editor.setOptions('');
        }

    });

    form.on('brand:change', function(form, brandEditor) {
        var brand= brandEditor.getValue(),
            newOptions = models[brand];            

        form.fields.model.editor.setOptions(newOptions);
    });

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