Захватить форму отправить в JavaScript

Question

Кажется, что есть много информации о том, как отправить форму с использованием 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, но мне не нравится это решение ... есть много способов отправить форму ... например, нажав клавишу возврата при вводе, но это не учитывается.

Ты

Answer 1

<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()

Answer 2

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

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

Обычный JS

DEMO

Рекомендуется использовать eventListener

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
    alert('hi');
  });
});

но если вам не нужно более одного слушателя, вы можете использовать onload и onsubmit

// Should only be triggered on first page load
alert('ho');

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

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

JQuery

// Should only be triggered on first page load
alert('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

    alert('hi');
  });
});

Answer 3

<form onSubmit="return captureForm()"> что должно сделать.Убедитесь, что ваш captureForm() метод возвращает false.

Answer 4

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

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

Answer 5

Другой вариант для обработки всех запросов, которые я использовал в своей практике для случаев, когда onload не может помочь, - это обработка отправки javascript, отправки html, 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);