Перехватить отправку формы в JavaScript и предотвратить нормальную отправку

Кажется, есть много информации о том, как отправить форму с помощью javascript, но я ищу решение для захвата, когда форма была отправлена, и перехвата ее в javascript.

HTML

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

Когда пользователь нажимает кнопку отправки, я не хочу, чтобы форма отправлялась, но вместо этого я хотел бы, чтобы вызывалась функция JavaScript.

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

Быстрый взлом - добавить к кнопке функцию onclick, но мне не нравится это решение ... есть много способов отправить форму ... например, нажав клавишу возврата во время ввода, что не учитывается.

Ty

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

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

Изменить : на мой взгляд, этот подход лучше, чем установка onSubmitатрибута в форме, поскольку он поддерживает разделение разметки и функциональности. Но это всего лишь мои два цента.

Edit2 : обновлен мой пример, чтобы включитьpreventDefault()

Вы не можете прикреплять события до того, как элементы, к которым вы их прикрепляете, загрузятся

Это работает -

Обычный JS

ДЕМО

Рекомендуется использовать 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>

но если вам не нужно более одного слушателя, вы можете использовать onload и 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()"> это должно сработать. Убедитесь, что ваш captureForm()метод возвращается false.

Другой вариант обработки всех запросов, которые я использовал в своей практике для случаев, когда onload не может помочь, - это обработка запросов javascript submit, html submit, ajax. Этот код должен быть добавлен в верхнюю часть элемента body, чтобы создать слушателя перед визуализацией и отправкой любой формы.

В примере я установил скрытое поле для любой формы на странице при ее отправке, даже если это происходит до загрузки страницы.

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

Используйте ответ @Kristian Antonsen, или вы можете использовать:

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