AJAX Форма отображения gif

Question

У меня есть форма отправки AJAX, написанная с плагином проверки jQuery. Все работает отлично, но я заметил, что люди повторно отправляют форму до завершения скрипта и вызывают дубликаты записей в нашей базе данных. Вот код, который я до сих пор:

$(document).ready(function(){ 
$("#myform").validate({ 
    debug: false, 
    rules: { 
     fname: {required: true}, 
     sname: {required: true}, 
     sex: {required: true}, 
    }, 
    messages: { 
     fname: {required: "- Field required."}, 
     sname: {required: "- Field required."}, 
     sex: {required: "- Field required."}, 
    }, 
    errorPlacement: function(error, element) { 
     if (element.is(":radio")) { 
     error.appendTo('.radioError'); 
     } 
     else { 
     error.insertAfter(element); 
     } 
    }, 
    submitHandler: function(form) { 
     $.post('process_participant.php', $("#myform").serialize(), function(data) { 
      $('#results').html(data); 
     }); 
     } 
    }); 
}); 

Может кто-нибудь объяснить мне, как увеличить этот код, чтобы поместить загрузки GIF в мои результатах DIV, пока мой сценарий не будет закончен и загрузка GIF заменяется моими фактическими результаты ? Я думаю, что это будет препятствовать людям дважды щелкнуть кнопку отправки.

Answer 1

В вашей submitHandler функции, вы можете скрыть свою форму, прежде чем процесс на $.post вызов, а затем в функции обратного вызова $.post, повторно показать свою форму, и делай все, что хочешь.

submitHandler: function(form) { 
    $("#myform").hide(); // Hide the form 
    // Here you can insert a loading pic 
    $.post('process_participant.php', $("#myform").serialize(), function(data) { 
     // Here you can remove the loading pic 
     $("#myform").show(); // Show the form 
     $('#results').html(data); 
    }); 
} 

Answer 2

Что-то вроде этого сделало бы трюк. Я также отключаю кнопку отправки до тех пор, пока сообщение не закончится, чтобы избежать дублированных подписок.

$('#mySubmitButton').prop('disabled',true); // Disable submit button 
$('#myAjaxIndicator').show(); // Show ajax indicator 

$.post('process_participant.php', $("#myform").serialize(), function(data) { 
    $('#results').html(data); 
}) 
.complete(function() { 
    $('#mySubmitButton').prop('disabled',false); // Enable submit button 
    $('#myAjaxIndicator').hide(); // Hide ajax indicator 
}); 

complete обратного вызова выполняется в случае успеха или ошибки, так что вы включите кнопку и скрыть индикатор в любой ситуации.

Answer 3

$("#myform").submit(function(){ 
    $('#results').html('<img src="gifUrl" />'); 
}); 

или именно в этом случае

submitHandler: function(form) { 
    $('#results').html('<img src="gifUrl" />'); 
    $.post('process_participant.php', $("#myform").serialize(), function(data) { 
     $('#results').html(data); 
    }); 
    }