backbone-forms with conditional fields

backbone.js, forms, html, javascript

Solution

You can bind events to the select element and have them toggle the visibility of other form elements.

Try this:

$(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) {         
        form.fields['line'].$el.toggle();
        form.fields['area'].$el.toggle();
    });

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

Here's some live code: http://jsfiddle.net/shioyama/grn6y/

Derived from this: https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

Problem

First of all thanks to the guys of backbone-forms who made a tool which perfectly integrates in the backbone.js framework. I'm using backbone.js with the backbone-forms plugin, but I need to make conditional fields. Let's say I've the following form. I want to show (or not) a single line input with thext or a textarea according to the value selected in the `select`. ``` <form method="post" action=""> <select > <option value="" selected="selected">choose one</option> <option value="1" >line</option> <option value="2" >area</option> </select> <input id="element_1" /> <textarea id="element_2" ></textarea> </form> ``` A behaviour like this one is implemented by default in backbone? If not, how can I implement it with javascript and backone-forms? thanks.

Original source