Best practices to do complex forms with javascript? 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?
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