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

Ty

5 53
javascript forms html

5 ответов:

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

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

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

63

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

работает -

Plain JS

демо

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

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

14

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

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

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