JavaScript & HTML-Formulare: Welcher Button ist der Übermittler?

Question

Ich schreibe eine JavaScript-Funktion zur Vorverarbeitung von Formulardaten. Eine Sache, die ich wissen muss, ist, welche von einer Anzahl von Übermittlungsknöpfen benutzt wurde.

Grob gesagt, hat das Skript die folgende Übersicht.

var form=document.querySelector('form#test'); 
form.onsubmit=processForm; 
function processForm() { 
    // how did I get here 
} 

<form id="test"> 
    <!-- usual stuff --> 
    <button type="submit" name="check">Check</button> 
    <button type="submit" name="doit">Do Stuff</button> 
</form> 

Ich weiß, dass ich die Funktion der einzelnen Tasten einreichen anhängen könnte, aber es wäre belastbarer, wenn ich es in die Form selbst angebracht.

Gibt es eine Form Eigenschaft oder eine andere Methode zur Überprüfung der Button verwendet wurde einreichen?

Dank

Answer 1

Sie click Handler jedes <button> Element anhängen, eine Variable erstellen speichern buttonname Eigenschaft geklickt haben, oder Verweis auf Element, Zugang Eigenschaft oder ein Element bei submit Ereignis

function processForm(e) { 
    e.preventDefault(); 
    console.log(curr) // `curr`: `name` of clicked `button"` element 
} 

var submit = document.querySelectorAll("button[type=submit]"); 
var curr; 
for (var i = 0; i < submit.length; i++) { 
    submit[i].onclick = function(e) { 
    curr = e.target.name; // store reference to `name`, or element 
    } 
} 

Answer 2

Normalerweise sind die Die Schaltfläche "Senden" wurde gesendet, da sie als aktiv angesehen wird. Ich glaube, dass, wenn es nur 1 Submit-Button gibt, das Formular bei Enter einreichen wird, aber wenn es mehrfach ist, wird es nur beim Klick übertragen.

So im Backend, können Sie einfach überprüfen, für die Existenz von jeder Form Taste wissen, welche Taste verwendet wurde.

Relevante Abschnitt von HTML rfc: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

Allerdings war ich nicht in der Lage eine gute Browser-Kompatibilität für diese so die Leistung kann variieren zu finden.

Answer 3

Ich glaube, die Antwort auf meine Frage ist, dass Sie nicht können. Sobald das Ereignis submit aktiviert ist, scheint es nicht zu wissen oder interessiert, wie es dort angekommen ist.

Die einzige Lösung, wie es in meiner ursprünglichen Frage erwähnt, ist ein Hörer auf die Submit-Button zu befestigen [s]. Hier

ist ein Stummel des Verarbeitungscode:

window.onload=init; 

function init() { 

    var form=document.querySelector('form#test'); 
    var submitButtons=form.querySelectorAll('button:not([type]),button[type="submit"],input[type="submit"]'); 
    if(submitButtons.length) { 
     for(var i=0;i<submitButtons.length;i++) submitButtons[i].addEventListener('click',process); 
    } 
    function process(e) { 
     var submitter=this; 
     var form=this.form; 
     // etc 
    } 
} 

Oh well ...