Показать сообщение отдельно
  #37 (permalink)  
Старый 28.10.2018, 07:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Допустим что у вас Ajax. В этом случае отправить форму, это ее сериализация (если JQ, то ее методы) или FormData(текущая форма). В любом случае поля формы должны иметь имена. Если имена полей это имена переменных, а форм несколько, то выгоден JSON:

//это установки контроллера и данные по формам
var data = {'#as1': [ //для одной формы
    {'Sample_Rate': 1},
    {'Sample_Volume': 2}
], '#as2': [ //для другой формы
    {'var_Rate': 2},
    {'var_Volume': 2}
]};

//как отметить выбор в формах
$.each(data, function(frm, opt) { //обходим объект
    frm = document.querySelector(frm); //получили форму
    $.each(opt, function(i, d) { //устанавливаем значения/выбор в полях
        var name = Object.keys(d); //имя поля/параметра
        frm[name].querySelector('[value="'+d[name]+'"]').selected = true; //установка
    })
})


Если форма имеет флажки, радио кнопки, текстовые поля, то можно сгруппировать такие поля префиксами в именах, например списки, это sel_, флажки и кнопки, это chk_, val_ текстовое поле. Проверяя префикс имени можно определить действие, то есть для списка это найти соответствующий опшен, выбрав его, для флажков отметить/выбрать как checked, а для текстовых полей установить значение. То есть без всяких заморочек не оперируя явно именами.

Всякие управляющие конструкции, типа как при изменении в списке изменить параметр поля, можно конечно и ID.параметр = IDs. А что если таких конструкций не одна?

Допустим имеется ряд параметров длина значений которых может динамически изменяться. Следовательно нужно описать один обработчик для всех таких изменений. При этом длина параметра может задаваться как атрибутом maxlength, так и быть параметром рег. выражения. Значит нужно определить для обработчика элемент, в котором изменяется параметр, и где он находится. Сделать это можно просто через атрибут, который также будет служить селектором для установки обработчика:

<form>
<select data-max="max1,attr">
<option value="4">Short</option>
<option value="8">Long</option>
</select>
<input name="max1" maxlength="4" />
<select data-max="max2,reg">
<option value="4">Short</option>
<option value="8">Long</option>
</select>
<input name="max2" pattern="\d{1,4}" />
</form>

<script>
$('[data-max]').change(function() { //обработчик изменения параметров полей
    var max = this.getAttribute('data-max').split(','), //элемент и место параметра
        elm = this.form[max[0]]; //сам элемент
    if(max[1]=='attr') elm.setAttribute('maxlength', this.value); //изменение параметра заданное атрибутом 
    else elm.pattern = elm.pattern.replace(/\d(?=\})/, this.value) //изменение параметра шаблона рег. выражения
})
</script>
Ответить с цитированием