Update form elements based on user input

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js "></script>
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://rawgit.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<body>


</body>

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() {

		setTimeout(function() {
    //The form
    var form = new Backbone.Form({
        schema: {
            inputType: { type: 'Select', options: ['line', 'area'] },
            line: 'Text',
            area: 'TextArea'
        }
    }).render();
    
    form.fields['area'].$el.hide();
    
    form.on('inputType:change', function(form, editor) {
        var inputType = editor.getValue();  
       
        form.fields['line'].$el.toggle();
        form.fields['area'].$el.toggle();
    });
    
    //Add it to the page
    $('body').append(form.el);
    
    }, 2000);
   

});