Как сделать блокировку повторной отправки формы и отображение состояния?

Question

[habey]

Доброго времени суток.

Часто приходят повторные заявки с лендинга. Поэтому нужно заблокировать повторную отправку формы и чтобы при выполнении PHP у посетителя появлялась иконка состояния:

На данный момент используется следующий код:

$(document).ready(function() {

	$("#form").submit(function() {
		$.ajax({
			type: "POST",
			url: "mail.php",
			data: $(this).serialize()
		}).done(function() {
			$(this).find("input").val("");
			$(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы
					event.preventDefault(); // выключaем стaндaртную рoль элементa
					$('#overlay').fadeIn(200, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
					 	function(){ // пoсле выпoлнения предъидущей aнимaции
							$('#modal_form') 
								.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
								.animate({opacity: 1, top: '50%'}, 100); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
					});
			
				/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
				$('#modal_close, #overlay, #ok').click( function(){ // лoвим клик пo крестику или пoдлoжке
					$('#modal_form')
						.animate({opacity: 0, top: '45%'}, 100,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
							function(){ // пoсле aнимaции
								$(this).css('display', 'none'); // делaем ему display: none;
								$('#overlay').fadeOut(200); // скрывaем пoдлoжку
							}
						);
				});
			});
			$("#form").trigger("reset");
		});
		return false;
	});
	
});

Подскажите пожалуйста, как его дополнить?

Answer 1

[websteam]

ставьте на button false если ajax succses

Answer 2

[Сергей Горностаев]

В обработчике beforeSend отключать кнопку и включать спинер. В обработчиках complete и error включать кнопку и выключать спинер.