Fangen Sie eine Formularübermittlung in JavaScript ab und verhindern Sie die normale Übermittlung

Es scheint viele Informationen darüber zu geben, wie ein Formular mit Javascript gesendet werden kann, aber ich suche nach einer Lösung, um zu erfassen, wann ein Formular gesendet wurde, und es in Javascript abzufangen.

HTML

<form>
 <input type="text" name="in" value="some data" />
 <button type="submit">Go</button>
</form>

Wenn ein Benutzer auf die Schaltfläche "Senden" drückt, möchte ich nicht, dass das Formular gesendet wird, sondern dass eine JavaScript-Funktion aufgerufen wird.

function captureForm() {
 // do some stuff with the values in the form
 // stop form from being submitted
}

Ein schneller Hack wäre, der Schaltfläche eine Onclick-Funktion hinzuzufügen, aber diese Lösung gefällt mir nicht ... es gibt viele Möglichkeiten, ein Formular zu senden ... z. B. die Eingabetaste zu drücken, während eine Eingabe ausgeführt wird, was dies nicht berücksichtigt.

Ty

<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

In JS:

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

Bearbeiten : Meiner Meinung nach ist dieser Ansatz besser als das Festlegen des onSubmitAttributs im Formular, da die Trennung von Markup und Funktionalität beibehalten wird. Aber das sind nur meine zwei Cent.

Edit2 : Mein Beispiel wurde aktualisiert, um es einzuschließenpreventDefault()

Sie können keine Ereignisse anhängen, bevor die Elemente, an die Sie sie anhängen, geladen wurden

Das funktioniert -

Plain JS

DEMO

Empfohlen, eventListener zu verwenden

// Should only be triggered on first page load
console.log('ho');

window.addEventListener("load", function() {
  document.getElementById('my-form').addEventListener("submit", function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */

    // Should be triggered on form submit
    console.log('hi');
  })
});

<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

Wenn Sie jedoch nicht mehr als einen Listener benötigen, können Sie onload und onsubmit verwenden

// Should only be triggered on first page load
console.log('ho');

window.onload = function() {
  document.getElementById('my-form').onsubmit = function() {
    /* do what you want with the form */

    // Should be triggered on form submit
    console.log('hi');
    // You must return false to prevent the default form behavior
    return false;
  }
}

    <form id="my-form">
      <input type="text" name="in" value="some data" />
      <button type="submit">Go</button>
    </form>

jQuery

// Should only be triggered on first page load
console.log('ho');

$(function() {
  $('#my-form').on("submit", function(e) {
    e.preventDefault(); // cancel the actual submit

    /* do what you want with the form */

    // Should be triggered on form submit

    console.log('hi');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <input type="text" name="in" value="some data" />
  <button type="submit">Go</button>
</form>

<form onSubmit="return captureForm()"> das sollte reichen. Stellen Sie sicher, dass Ihre captureForm()Methode zurückgegeben wird false.

Eine weitere Option zur Bearbeitung aller Anfragen, die ich in meiner Praxis für Fälle verwendet habe, in denen Onload nicht helfen kann, ist die Bearbeitung von Javascript-Submit-, HTML-Submit- und Ajax-Anfragen. Dieser Code sollte oben im body-Element hinzugefügt werden, um einen Listener zu erstellen, bevor ein Formular gerendert und gesendet wird.

In einem Beispiel habe ich ein ausgeblendetes Feld auf ein Formular auf einer Seite gesetzt, auch wenn es vor dem Laden der Seite auftritt.

//Handles jquery, dojo, etc. ajax requests
(function (send) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    XMLHttpRequest.prototype.send = function (data) {
        if (isNotEmptyString(token) && isNotEmptyString(header)) {
            this.setRequestHeader(header, token);
        }
        send.call(this, data);
    };
})(XMLHttpRequest.prototype.send);


//Handles javascript submit
(function (submit) {
    HTMLFormElement.prototype.submit = function (data) {
        var token = $("meta[name='_csrf']").attr("content");
        var paramName = $("meta[name='_csrf_parameterName']").attr("content");
        $('<input>').attr({
            type: 'hidden',
            name: paramName,
            value: token
        }).appendTo(this);

        submit.call(this, data);
    };
})(HTMLFormElement.prototype.submit);


//Handles html submit
document.body.addEventListener('submit', function (event) {
    var token = $("meta[name='_csrf']").attr("content");
    var paramName = $("meta[name='_csrf_parameterName']").attr("content");
    $('<input>').attr({
        type: 'hidden',
        name: paramName,
        value: token
    }).appendTo(event.target);
}, false);

Verwenden Sie die Antwort von @Kristian Antonsen, oder verwenden Sie:

$('button').click(function() {
    preventDefault();
    captureForm();
});