В этой статье мы рассмотрим, как отключить кнопку отправки после отправки формы в jQuery. Это не позволит пользователю отправить форму несколько раз. Мы также учитываем возможность того, что отправка формы недействительна или не проходит проверку, и, таким образом, в таком случае мы снова включим кнопку Мы будем использовать библиотеку jQuery для этого примера. Использование jQuery для выбора соответствующей кнопки отправки каждой формы на странице и отключение правильной кнопки для предотвращения отправки дубликатов формы.
Итак, без дальнейших задержек, давайте приступим к созданию нашего примера приложения. Для целей этого примера мы будем использовать следующий стек для нашего приложения.
Мы используем Node.js, который является JavaScript-фреймворком на стороне сервера, чтобы быстро раскрутить веб-сервер. jQuery — это библиотека пользовательского интерфейса, позволяющая сгладить различия в реализации JavaScript между поставщиками браузеров и версиями браузеров. Visual Studio Code IDE — это бесплатный инструмент, который мне наиболее удобен, но вы можете свободно использовать тот, с которым чувствуете себя как дома.
1. Структура приложения
Структура папок нашего приложения выглядит следующим образом:
2. HTML-разметка
index.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html><html><head> integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script src="myscript.js"></script> <style> body { height: 500px; width: 100%; } .flex-container { height: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; } </style></head><body> <div class="flex-container"> <form> <fieldset> <legend>JCG -- jQuery Disable Submit Button Example</legend> <label for="inputEmail">Email address</label> <input type="email" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email"> <label for="inputPassword">Password</label> <input type="password" id="inputPassword" placeholder="Password"> <input type="checkbox" id="rememberMe"> <label for="rememberMe">Remember Me</label> <button type="submit">Submit</button> </fieldset> </form> </div></body></html> |
Вот как выглядит наша разметка целевой страницы, она имеет простую форму входа с кнопкой отправки. Он запрашивает у пользователя адрес электронной почты и пароль и предоставляет флажок «Запомнить меня». Я использовал некоторые правила стиля для макета страницы.
3. JQuery Script
Чтобы отключить кнопку отправки, мы добавим обработчик для события отправки формы. В этом обработчике событий мы выберем кнопку отправки и установим ее отключенный атрибут, чтобы отключить ее. Мы также установим текст кнопки в строку, отправляющую форму, чтобы указать пользователю, что форма обрабатывается. Селектор для обработчика события submit будет выглядеть следующим образом:
|
1
|
$('form').submit(function (event) {}); |
Как только мы выберем форму, при отправке события мы отключим кнопку, которая является частью формы. Чтобы просто выбрать кнопку, которая является частью формы, а не другие на странице. Мы будем использовать следующий селектор:
|
1
|
$('button', this); |
Обратите внимание на второй параметр в селекторе, он гарантирует, что кнопка, которая является частью этой формы, выбрана. После выбора мы установим атрибут с помощью функции attr jQuery. А также установите текст кнопки для «отправки…», как показано ниже:
|
1
2
|
$("button", this).attr("disabled", "disabled");$("button", this).text("Submitting..."); |
Окончательная версия нашего скрипта, расположенная в myscript.js, выглядит следующим образом:
myscript.js
|
1
2
3
4
5
6
7
|
$(document).ready(function() { $("form").submit(function(event) { $("button", this).attr('disabled', 'disabled'); $("button", this).text("Submitting..."); event.preventDefault(); });}); |
Обратите внимание на вызов метода event.preventDefault (), он предназначен для демонстрации и отменяет отправку формы и последующее обновление страницы. Так что мы можем увидеть наш скрипт в действии. Это не обязательно, иначе.
4. Пример в действии
Теперь мы можем запустить наш код, введя приведенные ниже команды в корне проекта
|
1
2
|
>npm install>npm start |
Далее мы перейдем к URL http: // localhost: 8080, чтобы увидеть наш код в действии. При нажатии на кнопку «Отправить» мы можем увидеть результаты ниже.
5. Загрузите исходный код
Вы можете скачать полный исходный код этого примера здесь: jQuery Отключить кнопку после отправки Пример