There is a feedback form and the actual send button -

<div class="form-group"><button id="send" type="submit" class="btn btn-default btn-autoxl">Oтправить</div> 

There is a script that handles all this -

 jQuery(document).ready(function() { /* Contact form */ $('.contact-form form input[type="text"], .contact-form form textarea').on('focus', function() { $('.contact-form form input[type="text"], .contact-form form textarea').removeClass('input-error'); }); $('.contact-form form').submit(function(e) { e.preventDefault(); $('.contact-form form input[type="text"], .contact-form form textarea').removeClass('input-error'); var postdata = $('.contact-form form').serialize(); $.ajax({ type: 'POST', url: 'assets/contact.php', data: postdata, dataType: 'json', success: function(json) { if(json.nameMessage != '') { $('.contact-form form .contact-name').addClass('input-error'); } if(json.emailMessage != '') { $('.contact-form form .contact-email').addClass('input-error'); } if(json.messageMessage != '') { $('.contact-form form textarea').addClass('input-error'); } if(json.nameMessage == '' && json.emailMessage == '' && json.messageMessage == '') { $('.contact-form form').fadeOut('fast', function() { $('.contact-form').append('<p>Спасибо за обращение!</p>'); }); } } }); }); }); 

The problem is that the button can be pressed several times before the form disappears and the text appears - Спасибо за обращение! , and how many times the button is pressed, as many times as the letter goes to the box.

I tried to fix this with a script so that the button was inaccessible after pressing for a couple of seconds. It is during this time that the server manages to process the form and report either the successful sending of the message or an error. The script itself -

 $(function() { $('#send').click(function() { $(this).prop('disabled',true); setTimeout(function(){ $('#send').prop('disabled', false); },2000); }); }); 

And the button was unavailable for 2 seconds after each press, but it simply ceased to perform its function of sending data. And what is the problem, I can not understand.

  • Set disable by clicking and remove it as you get a response from the server. - Roman Grinyov

1 answer 1

You will be helped by handlers beforeSend, complete and error.

  $.ajax({ type: 'POST', url: 'assets/contact.php', data: postdata, dataType: 'json', beforeSend: function(xhr, settings) { $('#send').prop('disabled', true); }, complete: function(xhr, status) { $('#send').prop('disabled', false); }, error: function(xhr, status, error) { $('#send').prop('disabled', false); }, success: function(json) { if(json.nameMessage != '') { $('.contact-form form .contact-name').addClass('input-error'); } if(json.emailMessage != '') { $('.contact-form form .contact-email').addClass('input-error'); } if(json.messageMessage != '') { $('.contact-form form textarea').addClass('input-error'); } if(json.nameMessage == '' && json.emailMessage == '' && json.messageMessage == '') { $('.contact-form form').fadeOut('fast', function() { $('.contact-form').append('<p>Спасибо за обращение!</p>'); }); } } }); 
  • Unfortunately, your method did not help much, the button is blocked for a hundredth of a second and is active again. ~ 2 times I have time to click before sending, and comes 2 letters. Is it possible to lock a button for a couple of seconds? - Danya
  • @Danya setTimeout (func, delay) - Jean-Claude