Generisches Möglichkeit, ein Formular in Javascript zu füllen

StackOverflow https://stackoverflow.com/questions/257255

Frage

Ich bin auf der Suche nach einer wirklich generischen Art und Weise auf einem Parameter-String mit Hilfe von JavaScript basierte, ein Formular „ausfüllen“.

zum Beispiel, wenn ich dieses Formular: 

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

Ich möchte eine param Zeichenfolge nehmen können wie folgt aus: option1=2&option2=1

Und haben dann die richtigen Dinge ausgewählt, basierend auf den Optionen in dem Abfrage-String.

Ich habe eine Art hässliche Lösung, wo ich durch Kinder der Form gehen und überprüfen, ob sie die verschiedenen Tasten übereinstimmen, dann die Werte gesetzt, aber Ich mag es wirklich nicht.

Ich mag eine sauberere, generic Art und Weise tun, die für jede Form (vorausgesetzt, der param Zeichenfolge hatte die richtigen Tasten).

funktionieren würden

Ich bin mit dem Prototyp JavaScript-Bibliothek, so würde ich Vorschläge begrüßen, die es nutzen.

EDIT: das ist, was ich mit so weit habe kommen (mit Prototyp für 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;
      }
    });
  });
}

Ich glaube, dass es noch schneller sein könnte / Reinigungsmittel jedoch.

War es hilfreich?

Lösung

Wenn Sie Prototype verwenden, das ist einfach. Erstens können Sie die benutzen toQueryParams Methode auf dem String-Objekt ein JavaScript-Objekt mit dem Namen zu erhalten / Wert-Paare für jeden Parameter.

Zweitens können Sie die Form.Elements.setValue Methode verwenden (scheint nicht dokumentiert zu werden), um jeden Abfrage-String-Wert zu einem tatsächlichen Form Eingabezustand zu übersetzen (zB eine Checkbox, wenn der Query-String-Wert „auf“ ). Mit Hilfe der name.value = Wert Technik funktioniert nur für Text und wählen Sie (eins, nicht viele) Eingänge. die Prototype-Methode fügt die Unterstützung für Kontrollkästchen und wählen Sie (mehrfach) Eingänge.

Wie für eine einfache Funktion zu füllen, was Sie haben, das funktioniert gut und es ist nicht kompliziert. 

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

Dies verwendet die Object.keys und der

Andere Tipps

Versuchen Sie folgendes: 

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

Der obige Code wird davon ausgegangen, dass Sie ID-Werte sowie Namen zu jedem Formularelement zugeordnet werden. Es dauert Parameter in der Form: 

?key=value&key=value

oder 

?option1=1&option2=2

Wenn Sie wollen, es zu halten, bei nur Namen für die Elemente, dann versuchen Sie anstelle der oben: 

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

Dieser Code nimmt Parameter in Form von: 

?type_key=value&type_key=value

oder 

?select_option1=1&select_option2=2

Du hast gesagt, du bist schon durch die Elemente gehen und die Werte zu setzen. Aber vielleicht ist sauberer dass das, was Sie haben? 

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

Sie könnten dann das zu mehr anpassen als nur Elemente auswählen, wenn nötig.

Drei Zeilen Code in prototype.js : 

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

Sie können Formulardaten in JavaScript-Objekt Formmanager erhalten.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top