Update form elements based on user input

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<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 id="formTemplate_General" type="text/html">
            <div id="requestinfo" class="form">
                <div class="formHead">
                    <h2>Contact Request</h2>
                </div>
                <form id="request_form" class="form-horizontal" >
                    <div id="page1">
                        <div data-fields="first_name,last_name,job_title,email,phone,company"></div>    
                    </div>
                    <div id="page2">
                    <a href="#" id="back">Back</a>
                    <div data-fields="employees,siccode,address1,city,country,state,zip,comments"></div>
                    </div>
                    <div id="form-submit" class="form-actions">
                    <button type="button" id="page1Btn" class="btn btn-primary btn-large next">Continue</button>
                    <button style="display:none" id="SubmitButton" class="btn btn-primary btn-large" type="submit" style="display: inline-block;">Request Guide</button>
                    </div>
                </form>
            </div>

        </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 Data = Backbone.Model.extend({

        schema: {
            employees: {
                type: 'Select',
                title: '<span class="required-asterisk" >*</span> Employees on Site',
                validators: ['required'],
                options: [{
                    val: '',
                    label: '- Please Select -'
                }, {
                    val: '1-19',
                    label: '1 - 19 Employees locally'
                }, {
                    val: '20-49',
                    label: '20 - 49 Employees locally'
                }, {
                    val: '50-99',
                    label: '50 - 99 Employees locally'
                }, {
                    val: '100-299',
                    label: '100 - 299 Employees locally'
                }, {
                    val: '300-499',
                    label: '300 - 499 Employees locally'
                }, {
                    val: '500+',
                    label: '500+ Employees locally'
                }]
            }
        }
    });
    var data = new Data();
    //The form
    var Form = Backbone.Form({
        model: data,
        template: _.template($('#formTemplate_General').html()),
    });
    
    var form = new Backbone.Form().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);
});