Универсальный способ заполнить форму в javascript

Question

Я ищу действительно общий способ "заполнить" форму, основанную на строке параметра, используя javascript.

например, если у меня есть эта форма:

<form id="someform">
  <select name="option1">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select name="option2">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

Я хотел бы иметь возможность взять строку параметров следующим образом: option1=2&option2=1

И затем выберите правильные вещи на основе параметров в строке запроса.

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

Мне нужен более чистый, универсальный способ сделать это, который будет работать для любой формы (при условии, что строка параметров имеет все правильные ключи).

Я использую библиотеку прототипов javascript, поэтому я буду рад предложениям, которые воспользуются этим.

РЕДАКТИРОВАТЬ: это то, что я до сих пор придумал (используя прототип для Form.getElements(form))

function setFormOptions(formId, params) {
  params = params.split('&');
  params.each(function(pair) {
    pair = pair.split('=');
    var key = pair[0];
    var val = pair[1];
    Form.getElements(form).each(function(element) {
      if(element.name == key) {
        element.value = val;
      }
    });
  });
}

Я чувствую, что все равно может быть быстрее / чище.

Answer 1

Если вы используете Prototype, это легко. Во-первых, вы можете использовать метод toQueryParams объекта String, чтобы получить объект Javascript с парами имя / значение для каждого параметра.

Во-вторых, вы можете использовать метод Form.Elements.setValue (кажется, не документировано) для перевода каждого значения строки запроса в фактическое состояние ввода формы (например, установите флажок, если значение строки запроса установлено на «on»). ). Использование метода name.value = значение работает только для текста и выбора (один, а не много) входных данных. Использование метода Prototype добавляет поддержку для флажка и выбора (нескольких) входов.

Что касается простой функции для заполнения того, что у вас есть, она работает хорошо и не сложна.

function populateForm(queryString) {
    var params = queryString.toQueryParams();
    Object.keys(params).each(function(key) {
        Form.Element.setValue($("someform")[key], params[key]);
    });
}

При этом используются методы Object.keys и каждый для итерации по каждому параметру строки запроса и установки для соответствующей формы ввода (используя атрибут имени входа) соответствующего значения в объект params запроса.

Редактировать: Обратите внимание, что для работы этого решения не нужно иметь атрибуты id в элементах формы.

Answer 2

Попробуйте это:

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
      param = param.split('=');
      key = param[0];
      val = param[1];

      $(key).value = val;
  });
});

Приведенный выше код предполагает, что вы присваиваете значения идентификаторов и имена каждому элементу формы. Он принимает параметры в виде:

?key=value&key=value

или

?option1=1&option2=2

---

Если вы хотите сохранить только имена элементов, попробуйте вместо вышеприведенного:

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
    param = param.split('=');
    key = param[0].split('_');

    type = key[0];
    key = key[1];
    val = param[1];

    $$(type + '[name="' + key + '"]').each(function(ele) {
      ele.value = val;
    });
});

Этот код принимает параметры в виде:

?type_key=value&type_key=value

или

?select_option1=1&select_option2=2

Answer 3

Вы сказали, что уже просматриваете элементы и устанавливаете значения. Тем не менее, может быть, это чище, что у вас есть?

function setFormSelectValues(form, dataset) {
    var sel = form.getElementsByTagName("select");
    dataset.replace(/([^=&]+)=([^&]*)/g, function(match, name, value){
        for (var i = 0; i < sel.length; ++i) {
            if (sel[i].name == name) {
                sel[i].value = value;
            }
        }
    });                
}

Затем вы можете адаптировать это для большего, чем просто выбор элементов, если это необходимо.

Answer 4

Вы можете получить данные формы в объекте JavaScript, используя formManager .

Answer 5

Три строки кода в prototype.js :

$H(query.toQueryParams()).each(function(pair) {
    $("form")[pair.key].setValue(pair.value);
});