Best practices to do complex forms with javascript?

Question

In a Rails application, I want to have a complex form with some dynamic behaviour. For example, I want to show a part of the form want I check a box or I want to have different values in a select box when I choose a radio button.

I do this with JQuery. My problem concern the archirecture. I created a form object and I create a init method which init every behaviour of every components like this :

 PaintingForm.prototype.init = function() {
 var country_listener;
 if ($('form.painting').size() === 1) {
 this.form = $('form.painting').first();
 this.initImageUploader();
 this.initSubmit();
 this.assignInputs();
 this.initAutoComplete();
 this.listenCategories();
 country_listener = new CountryInputListener('#painting_country_id', '#painting_region_id');
 return country_listener.init();
 }
 };
 PaintingForm.prototype.initImageUploader = function() { //some code };
 PaintingForm.prototype.initSubmit = function() { //some code };
 PaintingForm.prototype.onSubmit = function() { //some code };
 PaintingForm.prototype.assignInputs = function() { //some code };
 PaintingForm.prototype.listenCategories = function() { //some code };
 PaintingForm.prototype.onCategoryInputChange = function() { //some code };
 PaintingForm.prototype.loadTechnics = function() { //some code };
 PaintingForm.prototype.showDepthIfSculptureChoosen = function() { //some code };
 PaintingForm.prototype.onLoadTechnicsSuccess = function() { //some code };
 PaintingForm.prototype.initAutoComplete = function() { //some code };

I'm not satisfied. I think I can split the form like this :

PaintingForm.prototype.init = function() {
 var country_listener;
 if ($('form.painting').size() === 1) {
 this.form = $('form.painting').first();
 (new PaintingForm.Category).init()
 (new PaintingForm.AutoComplete).init()
 (new PaintingForm.Depth).init()
 (new CountryInputListener('#painting_country_id', '#painting_region_id')).init();
 }
};
//other behaviour for the form
this.PaintingForm.Category = (function() {
 //Behaviour for categories
})();
this.PaintingForm.Depth = (function() {
 //Behaviour for depth
})();
this.PaintingForm.AutoComplete = (function() {
 //Behaviour for autocomplete
})();

It's better but I'm not sure. There is a lot of interactions between fields. Should I create one object for every fields? Is there a solution with a framework like or angular? Do you have correct examples?

• bunglestink: You might want to edit to ask about CoffeeScript since you aren't writing JavaScript at all. Client side techniques can be similar, but your title should match what you are asking.
• Dougui: It edited my question to include this info. I think best practices, on this subject, are the same with JS/CoffeeScript.
• Esailija: Don't forget that Javascripters cannot read CoffeeScript but CoffeeScripters can read Javascript.
• Dougui: @Esailija, I converted all the code using JS2Coffee

Answer 1

For a single form, this is the exact reason Knockout.js was created - tutorials here: http://learn.knockoutjs.com/#/?tutorial=intro

Angular is more of a full blown "SPA" framework, Knockout is data-binding for JavaScript with things like this: http://knockoutjs.com/documentation/if-binding.html

• Dougui: I like your suggestion but.. I like unobstructive javascript. I use simple_form for rails and it's difficulte to customize the html generated. I will check deeper knockout to see it can make me happier than simple_form in the case. Thank!
• Dougui: knockout is a great framework for complex forms and is easily integratable with rails or whatever you use which can generate html attributes.