Кажется, есть много информации о том, как отправить форму с помощью 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, но мне не нравится это решение ... есть много способов отправить форму ... например, нажав клавишу возврата во время ввода, что не учитывается.
Ty
javascript
html
forms
Мруустер
источник
источник
Ответы:
<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()
источник
window.onload=function() { ... }
чтобы обернуть егоprocessform()
функция вызывается, сэр?Вы не можете прикреплять события до того, как элементы, к которым вы их прикрепляете, загрузятся
Это работает -
Обычный 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="alert('hi'); return false;">
<form onSubmit="return captureForm()">
это должно сработать. Убедитесь, что вашcaptureForm()
метод возвращаетсяfalse
.источник
captureForm()
вернутьсяtrue
вместоfalse
.Другой вариант обработки всех запросов, которые я использовал в своей практике для случаев, когда 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);
источник
Используйте ответ @Kristian Antonsen, или вы можете использовать:
$('button').click(function() { preventDefault(); captureForm(); });
источник
function(e)
и calle.preventDefault()