Wie sammle ich Daten aus mehreren Eingabefeldern?

Question

Ich erstelle eine Polymer-Anwendung, in der die Suchschaltfläche mehrere Eingaben von Eingabefeldern hat. Und von dieser Sammlung dieser Eingabefelder-Suchschaltfläche sollte eine Suchoperation unter Berücksichtigung aller Eingaben durchgeführt werden.

folgenden wird das Bild für Szenario -

{Eisen-Form} ist eine der Option für das, aber ich will etwas Neues und mit Leichtigkeit. Bitte helfen Sie mir.

Answer 1

Ich habe keine HTML, also werde ich nur Elemente verwenden, die ich denke, dass Sie in Ihrem document haben werden.

-Test this out:

reine JavaScript:

var form = document.getElementsByTagName("form")[0]; 

form.onsubmit = function(){ // on form submit 
    var input = document.querySelectorAll("input"); 

    for(var i = 0; i < input.length; i++){ // loop through each input on the page 
     alert(input[i].value); // will alert the value of the input 
    } 

    return false; // stop form from posting 
} 

jQuery:

$("form").submit(function(){ // on form submit 
    $("input").each(function(){ // foreach input 
     var value = $(this).val(); // grab its value 

     alert(value); // output its value 
    }); 

    return false; // prevent form from posting 
}); 

Also, wenn das Formular abschickt, wird es jeder input durchlaufen, und Ausgang jeder Wert durch eine alert.

Hoffe, das hilft! :-)

Answer 2

Da Sie dies mit dem Polymer-Tag markiert haben, gibt es auch einen Polymer spezifischen Weg, damit umzugehen. @Caelan ist korrekt, aber dies funktioniert nicht mit Polymer-Elementen (oder benutzerdefinierten Elementen). Beispiele für diese Elemente sind paper-input und paper-checkbox. Eine Liste aller kundenspezifischen Eingaben finden Sie unter Paper Elements.

<iron-form></iron-form wird mit einer Eigenschaftsmethode serialize und validate geliefert, die Sie verwenden können, um alle Eingaben (einschließlich benutzerdefinierter Elemente) in einem Funktionsaufruf zu sammeln.

Siehe iron-form.serialize documentation

var form = document.querySelector('iron-form') 

form.onsubmit = function(event) { 
    event.preventDefault(); 
    var data = form.serialize() 
    // Do something with data 
    // return false; // could use instead of event.preventDefault() 
} 

preventDefault vs return false Gewinde auf Stack-Überlauf Sehen beide werden in Ihrem Fall arbeiten, da Sie nicht über sprudelnde Ereignisse kümmern.