Как запретить пользователю второй клик по форме отправить с помощью ajax submit и показать прогресс

Question

У меня есть форма для входа в ASP.NET MVC 3

После нажатия кнопки "Отправить" отправка формы занимает некоторое время, поскольку происходит много событий.в результате пользователь может нажать кнопку еще раз, думая, что что-то не так и что-то очень плохое может случиться.

Так что я просто могу включить / отключить кнопку, это, пожалуй, самый простой способ предотвратить второй щелчок, но я бы предпочел изменить форму сообщения на ajax.

Вот что я собираюсь сделать: после того, как пользователь нажмет на "Отправить", я хочу отобразить всплывающее окно / разделение, говорящее о том, что запрос обрабатывается, и показывает какой-то ajax-ладер там, а после обработки формы я хочу, чтобы пользователь следовалДействие в соответствии с логикой контроллера сервера (клиентская сторона не знает, куда будет перенаправлен пользователь.)

Возможно ли это сделать?Что ты думаешь?Как я могу сделать это лучше?

В настоящее время я смотрю на плагин jQuery Form , возможно, это поможет, но если вы предложите что-то, это будет здорово.

Также только что нашел это решение. ajax - Предотвратите двойной щелчок при отправке , но я думаю, что я все еще хотел бы, чтобы всплывающее окно отображалось с прогрессом.

Answer 1

У меня была такая же проблема, и в прошлом я использовал .attr("disabled","disabled") для отключения кнопки при первом щелчке, затем второй щелчок не срабатывает.В методе успеха (или ошибки) ответа JQuery ajax используйте .removeAttr("disabled")

EDIT:

Чтобы добавить всплывающее окно, вы обычно просто отображаете <div> и скрываете его, когдаобработка завершена.

Таким образом, по умолчанию у вас есть div CSS

#myPopUp{
display: none;
top: 50px;
left: 50px;
width: 250px;
height: 100px;
background-color:darkblue;
background-color:white;     
}

HTML

<div id="myPopUp">This is a popup</div>`

Теперь, когда вы добавляете отключенную кнопку в кнопку, вы также можете отобразитьвсплывающее окно с $("#myPopUp").show() и скрыть его снова сразу после того, как вы отключили удаление на кнопке $("#myPopUp").hide()