Generische Möglichkeit, ein Formular in Javascript auszufüllen

Question

Ich bin auf der Suche nach einem wirklich generischen Weg, um ein Formular auf der Grundlage einer Parameter-Zeichenfolge mit Javascript auszufüllen.

zum Beispiel, wenn ich diese Form haben:

<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 in der Lage sein möchte eine param Zeichenfolge wie folgt zu übernehmen: option1=2&option2=1

Und haben dann die richtigen Dinge auf dem ausgewählten Basis Optionen in der Abfragezeichenfolge.

Ich habe eine Art hässliche Lösung, wo ich durch Kinder des Formulars gehen und prüfen, ob sie die verschiedenen Schlüssel entsprechen, dann legen Sie die Werte fest, aber ich mag es wirklich nicht.

Ich hätte gerne einen Reiniger, generische Art und Weise es zu tun, die für jede Form funktionieren würde (vorausgesetzt, die Param-Zeichenfolge hatte alle richtigen Schlüssel).

Ich benutze die Prototyp-Javascript-Bibliothek, so würde ich Anregungen begrüßen, die davon profitieren.

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/Reiniger jedoch sein könnte.

Answer 1

Wenn Sie Prototyp verwenden, das ist einfach. Zuerst können Sie die toQueryParams-Methode für das String-Objekt verwenden, um ein JavaScript-Objekt mit Name/Wert-Paaren für jeden Parameter abzurufen.

Zweitens können Sie die Form.Elements.setValue-Methode verwenden (scheint nicht dokumentiert zu sein), um jeden Abfragezeichenfolgenwert in einen tatsächlichen Formulareingabezustand (z.Aktivieren Sie ein Kontrollkästchen, wenn der Abfragezeichenfolgenwert aktiviert ist. Die Verwendung der name.value = value-Technik funktioniert nur für Text und wählt (eine, nicht viele) Eingaben aus. Die Verwendung der Prototyp-Methode fügt Unterstützung für Kontrollkästchen hinzu und wählt (mehrere) Eingaben aus.

Wie für eine einfache Funktion zu füllen, was Sie haben, funktioniert das 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 die each Methoden über jede Abfrage-String-Parameter iterieren und die passenden Form Eingang (unter Verwendung des Eingabenamensattributes) mit dem entsprechenden Wert in der Abfrage params Objekt gesetzt.

Bearbeiten: Beachten Sie, dass Sie keine ID-Attribute in Ihren Formularelementen benötigen, damit diese Lösung funktioniert.

Answer 2

Sie sagten, Sie gehen bereits durch die Elemente und setzen die Werte. Aber vielleicht ist das sauberer was du hast?

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

Answer 3

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, dass es für die Elemente an nur Namen zu halten, versuchen Sie dann, 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

Answer 4

Drei Zeilen Code in prototype.js:

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

Answer 5

Sie können mit formManager Formulardaten in JavaScript-Objekt bekommen.