Przechwyć formularz przesłany w języku JavaScript i uniemożliwi normalne przesyłanie

Wydaje się, że istnieje wiele informacji o tym, jak przesłać formularz przy użyciu javascript, ale szukam rozwiązania, które pozwoli uchwycić, kiedy formularz został przesłany i przechwycić go w javascript.

HTML

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

Gdy użytkownik naciśnie przycisk przesyłania, nie chcę, aby formularz był przesyłany, ale zamiast tego chcę, aby została wywołana funkcja JavaScript.

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

Szybkim hackem byłoby dodanie funkcji onclick do przycisku, ale nie podoba mi się to rozwiązanie ... istnieje wiele sposobów na przesłanie formularza ... np. Naciśnięcie klawisza powrotu na wejściu, czego to nie uwzględnia.

Ty

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

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

Edycja : moim zdaniem to podejście jest lepsze niż ustawianie onSubmitatrybutu w formularzu, ponieważ zachowuje oddzielenie znacznika od funkcjonalności. Ale to tylko moje dwa centy.

Edit2 : Zaktualizowałem mój przykład, aby uwzględnićpreventDefault()

Nie możesz dołączać zdarzeń przed załadowaniem elementów, do których je dołączyłeś

To działa -

Zwykły JS

PRÓBNY

Zalecane użycie eventListener

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

ale jeśli nie potrzebujesz więcej niż jednego słuchacza, możesz użyć onload i onsubmit

// 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()"> to powinno wystarczyć. Upewnij się, że captureForm()metoda zwraca false.

Inną opcją obsługi wszystkich żądań, których użyłem w mojej praktyce w przypadkach, gdy onload nie może pomóc, jest obsługa przesyłania javascript, przesyłania html, żądań ajax. Ten kod należy dodać w górnej części elementu body, aby utworzyć odbiornik przed jakimkolwiek renderowaniem i przesłaniem formularza.

Na przykład ustawiłem ukryte pole na dowolny formularz na stronie podczas jego przesyłania, nawet jeśli dzieje się to przed załadowaniem strony.

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

Użyj odpowiedzi @Kristian Antonsen lub możesz użyć:

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