Перехопіть подання форми в 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 до кнопки, але мені це рішення не подобається ... є багато способів подати форму ... наприклад, натискання return під час введення, чого це не враховує.

Тай

<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, 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();
});