Как создать динамическую форму, используя jQuery? - PullRequest
Новая
       5

Как создать динамическую форму, используя jQuery?

2 голосов
/ 03 августа 2010

Я видел много помощи для динамического добавления строк или полей, но меня интересует управление полями, которые зависят друг от друга.

Например, у меня есть форма с 3 пользовательскими вводами: 

<select id="foo">
  <option value="0">No</option>
  <option value="1">Yes</option>
</select>

Когда значение #foo установлено на 1, я бы хотел включить #bar. 

<!-- by default, bar should be disabled -->
<select id="bar">
  <option value="something_1">Something 1</option>
  <option value="something_2">Something 2</option>
  <option value="other">Other...</option>
</select>

Когда значение #bar установлено на other, я бы хотел включить #baz. 

<!-- by default, baz should be disabled -->
<textarea id="baz"></textarea>

Моя цель

Я хотел бы получить руководство по написанию небольшого плагина, который позволяет легко создавать входные данные форм с зависимостями.

Я бы хотел короткий, краткий синтаксис. Есть ли способ добавить помощники атрибутов html для помощи плагину jQuery в «автоматизации» вещей?

Предвидимые проблемы

  1. Если для #foo установлено значение "Да", для #bar установлено значение "другое", тогда для #foo установлено значение "Нет", я также хочу, чтобы зависимости #bar были деактивированы / скрыты. .
  2. Входы включены / отключены и / или видимы / скрыты; Было бы неплохо иметь возможность определять пользовательское поведение для элементов.

Изобретая колесо

Если есть плагин, который делает подобные вещи, дайте мне знать! Казалось, я не могу найти один ...

Ответы [ 2 ]

1 голос
/ 03 августа 2010

Вы захотите сосредоточиться на обработке события .change() в качестве точки входа.Обработчик может найти идентификатор и значение элемента формы в структуре JSON, чтобы решить, какие действия должны выполняться.Javascript может выглядеть так: 

form = {"input1" : 
    {"value1": {
        /*action list */
        [{"hide": ["input2", "input3"], "show": ["input4"], "set": {"input5": "True", "input6": "False"}]
    },
    "value2": {[/* another set of actions */]}
}


function onchange(e) {
    id = $(this).attr("id");
    value = $(this).val();
    if (id in form) {
        if (value in form[id]) {
            $.each(form[id][value], function(i, action) {
                if ("hide" in action) { $(action).hide(); }
                /* etc for other actions */
            });
        }
    }
}

$(document).ready(function() {$("input").change(onchange);}
0 голосов
/ 04 августа 2010

Быстрый плагин 

(function($){

  $.fn.inputDependsOn = function(id, values, options){

    var self = this;

    // methods
    this.disable = function(e){
      return e.addClass(options.cssClass).attr({disabled: true}).trigger("disable");
    };

    this.enable = function(e){
      return e.removeClass(options.cssClass).attr({disabled: null}).trigger("enable");
    };

    // options
    options = $.extend({}, $.fn.dependsOn.defaults, options || {});

    var parent = $(id);

    this.each(function(){
      var child = $(this);

      // parent binds
      parent
        .bind("change", function(){
          var v = parent.val();
          if(parent.is(":not(:disabled)") && v in values){
            self[values[v]](child);
          }
          else {
            self[options.init](child);
          }
          child.change();
        })
        .bind("disable", function(){
          self.disable(child);
        })
      ;
    });

    // init
    parent.change();
    return this;
  };

  $.fn.dependsOn.defaults = {
    init: "disable",
    cssClass: "disabled"
  };

})(jQuery);

Используя HTML в исходном вопросе, цель может быть достигнута с помощью: 

$("#bar").inputDependsOn("#foo", {"1": "enabled"});
$("#baz").inputDependsOn("#bar", {"other": "enable"});

Этот плагин будет поддерживаться и обновляться здесь:

github.com / Мацек / JQuery-вход-зависит-от

...