Manera genérica de llenar un formulario en javascript

Question

Estoy buscando una forma realmente genérica de " completar " un formulario basado en una cadena de parámetros usando javascript.

por ejemplo, si tengo este formulario:

<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>

Me gustaría poder tomar una cadena de parámetros como esta: option1=2&option2=1

Y luego selecciona las cosas correctas según las opciones en la cadena de consulta.

Tengo una especie de solución fea en la que analizo los elementos del formulario y compruebo si coinciden con las distintas claves, luego configuro los valores, pero realmente no me gusta.

Me gustaría una forma más limpia, genérica de hacerlo que funcionaría para cualquier forma (asumiendo que la cadena param tenía todas las claves correctas).

Estoy usando la biblioteca de prototipos de javascript, por lo que agradecería las sugerencias que lo aprovechen.

EDIT: esto es lo que he encontrado hasta ahora (utilizando el prototipo para Form.getElements (formulario) )

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;
      }
    });
  });
}

Sin embargo, siento que aún podría ser más rápido / más limpio.

Answer 1

Si estás utilizando Prototype, esto es fácil. Primero, puede usar el método toQueryParams en el objeto String para obtener un objeto Javascript con nombre / pares de valores para cada parámetro.

Segundo, puedes usar el método Form.Elements.setValue (no parece estar documentado) para traducir cada valor de cadena de consulta a un estado de entrada de formulario real (por ejemplo, marca una casilla de verificación cuando el valor de cadena de consulta está " activado " ;). El uso de la técnica name.value = value solo funciona para texto y selecciona (una, no muchas) entradas. El uso del método Prototype agrega soporte para la casilla de verificación y selecciona (múltiples) entradas.

En cuanto a una función simple para rellenar lo que tienes, esto funciona bien y no es complicado.

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

Esto utiliza Object.keys y cada método para iterar sobre cada parámetro de cadena de consulta y establecer la entrada del formulario correspondiente (usando el atributo de nombre de entrada) al valor coincidente en la consulta objeto params.

Editar: Tenga en cuenta que no necesita tener atributos de identificación en los elementos de su formulario para que esta solución funcione.

Answer 2

Prueba esto:

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;
  });
});

El código anterior asume que usted asigna valores de identificación así como nombres a cada elemento del formulario. Toma parámetros en la forma:

?key=value&key=value

o

?option1=1&option2=2

---

Si desea mantenerlo solo con los nombres de los elementos, intente en lugar de los anteriores:

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;
    });
});

Este código toma parámetros en la forma de:

?type_key=value&type_key=value

o

?select_option1=1&select_option2=2

Answer 3

Dijiste que ya estás pasando por los elementos y configurando los valores. Sin embargo, tal vez esto es más limpio que lo que tienes?

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;
            }
        }
    });                
}

Luego, puede adaptar eso a más que solo seleccionar elementos si es necesario.

Answer 4

Tres líneas de código en prototype.js :

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

Answer 5

Puede obtener datos de formulario en el objeto JavaScript utilizando formManager .