Générique pour remplir un formulaire en javascript

Question

Je cherche une manière vraiment générique de "remplir" un formulaire basé sur une chaîne de paramètres en utilisant javascript.

par exemple, si j'ai cette forme:

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

Je voudrais être en mesure de prendre une chaîne de param comme ceci: option1=2&option2=1

Et puis ont choisi les choses correctes en fonction de la options dans la chaîne de requête.

J'ai une sorte de solution laide où je passe par les enfants du formulaire et vérifie s'ils correspondent aux différentes clés, puis définissez les valeurs, mais je ne l'aime vraiment pas.

Je voudrais un nettoyeur, générique façon de le faire qui fonctionnerait pour n'importe quelle forme (en supposant que la chaîne de param avait toutes les bonnes clés). J'utilise le prototype de bibliothèque javascript, donc je serais heureux de recevoir des suggestions qui en profiteraient.

EDIT: Voici ce que je suis venu avec jusqu'à présent (en utilisant un prototype pour 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; 
     } 
    }); 
    }); 
} 

Je pense que cela pourrait être encore plus rapide/plus propre cependant.

Answer 1

Si vous utilisez Prototype, c'est facile. Tout d'abord, vous pouvez utiliser la méthode toQueryParams sur l'objet String pour obtenir un objet Javascript avec des paires nom/valeur pour chaque paramètre. En second lieu, vous pouvez utiliser la méthode Form.Elements.setValue (ne semble pas être documentée) pour traduire chaque valeur de chaîne de requête en un état d'entrée de formulaire réel (par ex.cochez une case lorsque la valeur de la chaîne de requête est "activée"). L'utilisation de la technique name.value = value ne fonctionne que pour le texte et sélectionne (une, pas beaucoup) d'entrées. L'utilisation de la méthode Prototype ajoute le support de la case à cocher et sélectionne (plusieurs) entrées. Comme une simple fonction pour remplir ce que vous avez, cela fonctionne bien et ce n'est pas compliqué.

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

Celui-ci utilise les Object.keys et les méthodes each pour itérer sur chaque paramètre de chaîne de requête et définir l'entrée de forme correspondante (en utilisant l'attribut de nom d'entrée) à la valeur correspondante dans l'objet params de requête.

Modifier: Notez que vous n'avez pas besoin d'attributs id sur vos éléments de formulaire pour que cette solution fonctionne.

Answer 2

Vous avez dit que vous parcourez déjà les éléments et que vous définissez les valeurs. Cependant, peut-être que c'est plus propre que ce que vous avez?

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

Vous pouvez ensuite adapter cela à plus que simplement sélectionner des éléments si nécessaire.

Answer 3

Essayez ceci:

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

Le code ci-dessus suppose que vous attribuez des valeurs id ainsi que les noms à chaque élément de formulaire. Il prend des paramètres sous la forme:

?key=value&key=value

ou

?option1=1&option2=2

---

Si vous voulez le garder à juste des noms pour les éléments, essayez alors, au lieu de ce qui précède:

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

Ce code prend les paramètres sous la forme de:

?type_key=value&type_key=value

ou

?select_option1=1&select_option2=2

Answer 4

Trois lignes de code dans prototype.js:

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

Answer 5

Vous pouvez obtenir des données de formulaire en objet JavaScript à l'aide formManager.