Disable form on submit javascript

.prevent Default ( )

На каждое действие пользователя на сайте, браузер создаёт события. Это наш главный способ в коде понимать, что происходит на странице. Событие — это объект, который имеет набор свойств и методов для взаимодействия с ним.

prevent Default ( ) — метод события. Этот метод отменяет поведение браузера по умолчанию, которое происходит при обработке события.

Например, при нажатии на ссылку, мы переходим по адресу этой ссылки. Вызов prevent Default ( ) отменит это поведение.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Отменим переход по ссылке для всех тегов на странице. Для этого получим все ссылки с помощью query Selector ( ) , подпишемся на событие ‘click’ , и вызовем prevent Default ( ) :

 const links = document.querySelector('a') links.addEventListener('click', (event) =>  // отменяем действие по умолчанию. Перехода по ссылке не будет event.preventDefault()>) const links = document.querySelector('a') links.addEventListener('click', (event) =>  // отменяем действие по умолчанию. Перехода по ссылке не будет event.preventDefault() >)    Скопировать Скопировано Не удалось скопировать   

Пример

Скопировать ссылку «Пример» Скопировано

Как понять

Скопировать ссылку «Как понять» Скопировано

Давайте разберём код из интерактивного примера:

  const runTimer = (inputElement) =>  setTimetout(() =>  inputElement.focus() >, 5000) > const inputElement = document.querySelector('.input') inputElement.addEventListener('mousedown', (event) =>  event.preventDefault() runTimer(inputElement) >); const runTimer = (inputElement) =>  setTimetout(() =>  inputElement.focus() >, 5000) > const inputElement = document.querySelector('.input') inputElement.addEventListener('mousedown', (event) =>  event.preventDefault() runTimer(inputElement) >);    Скопировать Скопировано Не удалось скопировать   

Когда пользователь нажимает на инпут элемент, генерируется цепочка событий в следующем порядке: mousedown -> mouseup -> click .

Когда происходит событие mousedown , браузер устанавливает фокус на поле ввода. Вызовом event . prevent Default ( ) мы отменили это поведение. Затем мы запустили таймер, который установит фокус на инпут через 5 секунд с помощью вызова метода focus ( ) .

На практике

Скопировать ссылку «На практике» Скопировано

Георгий Милевский советует

Скопировать ссылку «Георгий Милевский советует» Скопировано

🛠 Часто возникает необходимость отправить данные из формы на сервер без перезагрузки страницы. Поведение по умолчанию формы — это отправка запроса на сервер и перезагрузка страницы. И тут нам на помощь приходит метод prevent Default ( ) , который отменит действия связанные с отправкой формы:

   Промокод  Применить  form class="discount-form"> label for="promocode">Промокодlabel> input id="promocode" type="text" name="promocode" placeholder="WIN-1234" required> button type="submit">Применитьbutton> form>    Скопировать Скопировано Не удалось скопировать   

 const form = document.querySelector('.discount-form')form.addEventListener('submit', (event) =>  event.preventDefault() // код по подготовке данных // и их отправка на сервер>) const form = document.querySelector('.discount-form') form.addEventListener('submit', (event) =>  event.preventDefault() // код по подготовке данных // и их отправка на сервер >)    Скопировать Скопировано Не удалось скопировать   

Подробнее этот подход разбирается в статье «Работа с формами».

Источник

Запретить отправку формы JavaScript

1. Используйте функцию в теге script , чтобы остановить выполнение формы в JavaScript
2. Используйте ванильный JavaScript, чтобы остановить выполнение формы в JavaScript
3. Используйте библиотеку jQuery , чтобы остановить выполнение формы в JavaScript
4. Используйте Dojo Toolkit, чтобы остановить выполнение формы в JavaScript

JavaScript поддерживается всеми веб-браузерами и используется для создания динамических веб-страниц. В этом руководстве мы остановим выполнение формы с помощью JavaScript.

Используйте функцию в теге script , чтобы остановить выполнение формы в JavaScript

Тег script используется для хранения клиентского сценария. Мы создали функцию JavaScript в тегах script , чтобы предотвратить отправку формы.

form onsubmit="submitForm(event)">  input type="text">  button type="submit">Submitbutton>  form> script type="text/JavaScript">  function submitForm(event)  event.preventDefault();  window.history.back();  >  script> 

Функция preventDefault() не позволяет выполнить действие по умолчанию для события. window.history.back() переносит нас на предыдущий URL в нашей истории. Все обсуждаемые методы будут включать эти две функции.

Используйте ванильный JavaScript, чтобы остановить выполнение формы в JavaScript

Ванильный JavaScript работает исключительно на JavaScript без использования каких-либо дополнительных библиотек.

Для предотвращения отправки формы можно использовать прослушиватель событий. Он добавляется к кнопке отправки, которая выполняет функцию и предотвращает отправку формы при нажатии.

element.addEventListener("submit", function(event)   event.preventDefault();  window.history.back(); >, true); 

Используйте библиотеку jQuery , чтобы остановить выполнение формы в JavaScript

jQuery — это быстрая и надежная библиотека, которая упрощает использование JavaScript. Это одна из самых популярных библиотек JavaScript.

Посмотрим, как можно предотвратить отправку формы.

$('#form').submit(function(event)   event.preventDefault();  window.history.back(); >); 

Функция $(‘#form’).submit() используется для отправки формы в jQuery.

Используйте Dojo Toolkit, чтобы остановить выполнение формы в JavaScript

Это библиотека JavaScript, которая помогает упростить кроссплатформенное использование JavaScript для веб-приложений. Он использует функцию dojo.connect() для обработки событий. В нашем случае это используется для отправки формы, и мы предотвратим это с помощью функции preventDefault() и window.history.back() .

dojo.connect(form, "submit", function(event)   event.preventDefault();  window.history.back(); >); 

Сопутствующая статья — JavaScript Form

Источник

Disable Submit Button on Form Submit with JavaScript

Let’s say you have a simple form with a plain old submit to the server without Ajax. Sometimes the process take up to a second or even more, depending on the payload. Obviously if you’re sending a file it will take longer. During that time, it is possible for the user to hit the submit button multiple times, whether by accident or intentionally. In that case, the server will receive multiple submissions of the same form data.

The solution (or one of them)

A solution that I’ve employed often to ensure the form is submitted only one time — not because it’s the best but because it’s the quickest technique to reach for — is to disable the submit button once it’s clicked. Since this is a server-side request, I am not too worried that the request will fail and the button will remain disabled.

Give the following HTML for our form:

We could use JavaScript to disable the button like so:

var butt = document.getElementById('butt'); butt.addEventListener('click', function(event) < event.target.disabled = true; >);

The sequence of events goes something like this: the user clicks the button → the button is disabled → the form gets submitted → the server handles the request → it redirects wherever it is meant to.

That should be the end of the story. But wait, there’s more!

Chrome vs Firefox vs Safari

Unfortunately this little snippet does not work consistently across browsers. As of this writing, I tested this in the desktop versions of Chrome 75, Firefox 67, and Safari 12.

In Chrome or Safari, clicking the button will disable it but NOT submit the form. In Firefox, the behavior is as expected: click — disable — submit.

Try it out for yourself on Codepen. If it’s not immediately obvious what happens, in Chrome/Safari, after the button is disabled, it remains on the screen (meaning the form wasn’t submitted). In Firefox, it is disabled and then it disappears (meaning the form was submitted).

The improved solution

What does one do when confronted with a situation like this, and they’re not a JavaScript grandmaster? Well, reach for the ol’ setTimeout trick, of course.

I suspect this situation has something to do with JavaScript’s async nature, yada yada (correct me if I’m wrong). To break out of that behavior for this situation, and make the sequence of events synchronous, just wrap the offending code in a setTimeout 0 statement, like so:

var butt = document.getElementById('butt'); butt.addEventListener('click', function(event) < setTimeout(function () < event.target.disabled = true; >, 0); >);

Or 1337 ES6 1-liner (I’m sure someone will find an even shorter way to write this):

document.getElementById('butt').addEventListener('click', event => setTimeout(() => event.target.disabled = true, 0));

Now the behavior is consistent in all browsers: click → disable → submit. Say what you will, but I’ve used this trick often when I run into similar situations and it works without fail.

by Constantin @brbcoding

Comments? Hit me up on Twitter.

2023 🦄 All content & opinions my own

Источник