Basic forms with conditional fields

Question

First of all, thanks to the backbone-forms guys who created a tool that integrates perfectly with backbone.js frameworks.

I am using backbone.js with the main forms plugin, but I need to make conditional fields.

Say I have the following form. I want to show (or not) a single string input with text or text field according to the value selected in 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> 

Is a behavior like this executed by default in the trunk?

If not, how can I implement it using javascript and backone-forms?

thanks.

Answer 1

You can bind events to the select element and switch the visibility of other form elements.

Try the following:

 $(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 are some live code: http://jsfiddle.net/shioyama/grn6y/

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

Answer 2

There is no default implementation. In fact, completely discretionary is also very simple, refer to the following code:

 //Pseudo code var line = $("element_1"),area = $("element_2"); if(selectvalue ==="1"){ line.show(); area.hide(); } else{ line.hide(); area.show(); }