Interceptar el envío de un formulario en JavaScript y evitar el envío normal

Parece haber mucha información sobre cómo enviar un formulario usando javascript, pero estoy buscando una solución para capturar cuándo se ha enviado un formulario e interceptarlo en javascript.

HTML

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

Cuando un usuario presiona el botón Enviar, no quiero que se envíe el formulario, sino que me gustaría que se llamara a una función de JavaScript.

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

Un truco rápido sería agregar una función onclick al botón, pero no me gusta esta solución ... hay muchas formas de enviar un formulario ... por ejemplo, presionando retorno mientras está en una entrada, lo que esto no tiene en cuenta.

Ty

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

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

Editar : en mi opinión, este enfoque es mejor que establecer el onSubmitatributo en el formulario, ya que mantiene la separación del marcado y la funcionalidad. Pero esos son solo mis dos centavos.

Edit2 : actualicé mi ejemplo para incluirpreventDefault()

No puede adjuntar eventos antes de que los elementos a los que los adjunta se hayan cargado

Esto funciona -

JS simple

MANIFESTACIÓN

Recomendado para usar 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>

pero si no necesita más de un oyente, puede usar onload y 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()"> eso debería hacer. Asegúrese de que su captureForm()método regrese false.

Otra opción para manejar todas las solicitudes que utilicé en mi práctica para los casos en que onload no puede ayudar es manejar solicitudes de javascript, html y ajax. Este código debe agregarse en la parte superior del elemento del cuerpo para crear un oyente antes de que se procese y envíe cualquier formulario.

En el ejemplo, configuro el campo oculto para cualquier formulario en la página en su envío, incluso si ocurre antes de la carga de la página.

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

Use la respuesta de @Kristian Antonsen, o puede usar:

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