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

Ти

Ответ 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()

Ответ 2

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

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

Обычный JS

DEMO

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

Еще один способ обработки всех запросов, которые я использовал в своей практике, в случаях, когда 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);