jQuery Ajax setTimeout в функции beforeSend во время отправки формы

У меня есть контактная форма, созданная PHP и ajax. Я хочу, когда я нажимаю на Send Message кнопку смены кнопки на Sending... в пределах beforeSend функции. Я хочу установить время на кнопку, пока не покажу мне Sending... текст около 5 секунд. Я создал функцию SetTimeout, как показано ниже, но не работаютjQuery Ajax setTimeout в функции beforeSend во время отправки формы

Редактировать код только я добавить некоторые условные операторы в MYD done функции и я добавил код в complete функции

(function (jQuery, window, document, undefined) { 
'use strict'; 

jQuery('#contactForm').submit(function(event) { 

    var bsnname = jQuery('#bsnname').val(); 
    var bsnsubject = jQuery('#bsnsubject').val(); 
    var bsnemail = jQuery('#bsnemail').val(); 
    var bsnmessage = jQuery('#bsnmessage').val(); 

    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage}, 
     dataType: 'json', 
     cache: false 
    }) 
    .done(function(data) { 
     if (!data.success) { 
      if(data.errors.nameEmpty) { 
       jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameEmpty + '</em>'); 
      } else { 
       jQuery('#name-field .text-danger').fadeOut(25); 
       if(data.errors.nameLengthErrors) { 
        jQuery('#name-field').append('<em class="text-danger">' + data.errors.nameLengthErrors + '</em>'); 
       } 
      } 
      if(data.errors.subjectEmpty) { 
       jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectEmpty + '</em>'); 
      } else { 
       jQuery('#subject-field .text-danger').fadeOut(25); 
       if(data.errors.subjectLengthErrors) { 
        jQuery('#subject-field').append('<em class="text-danger">' + data.errors.subjectLengthErrors + '</em>'); 
       } 
      } 
      if(data.errors.emailEmpty) { 
       jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailEmpty + '</em>'); 
      } else { 
       jQuery('#email-field .text-danger').fadeOut(25); 
       if(data.errors.emailFormatErrors) { 
        jQuery('#email-field').append('<em class="text-danger">' + data.errors.emailFormatErrors + '</em>'); 
       } 
      } 
      if(data.errors.messageEmpty) { 
       jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageEmpty + '</em>'); 
      } else { 
       jQuery('#message-field .text-danger').fadeOut(25); 
       if(data.errors.messageLengthErrors) { 
        jQuery('#message-field').append('<em class="text-danger">' + data.errors.messageLengthErrors + '</em>'); 
       } 
      } 
     } else { 
       jQuery('#success-msg').append('<p class="bg-success">Message has been sent</p>'); 
     } 

    }) 
    .fail(function(data) { 
    }); 

    jQuery(document).ajaxComplete(function() { 
     document.getElementById("contactForm").reset(); 
    }); 

    event.preventDefault(); 
}); 
}(jQuery, window, document));

источник

2016-05-04 Shwan Namiq

Я немного запутался, что вы делаете. Но setTimeout задерживает изменение на пять секунд, что кажется странным. Я бы переключил кнопку на отправку внутри beforeSend, а затем воспользовался обратным вызовом запроса ajax, чтобы изменить его на отправку или что-то в этом роде. –

Я хочу, когда я нажму кнопку «Отправить сообщение», измените текст для отправки ... покажите его примерно через 5 секунд после этого сообщения об успешном завершении. (Сообщение об успешной работе со мной правильно, но я хочу отложить его на 5 секунд) –

Почему бы вам просто не изменить текст сразу после ответа? То, что вы ищете, - это установить текст кнопки для отправки ... как у вас в коде без тайм-аута, а затем установить привязку, которая изменит ее обратно ровно на пять секунд. –

Вам не нужно использование beforeSend. Просто оберните функцию AJAX внутри функции обратного вызова setTimeout, как показано ниже.

jQuery('button').text("Sending..."); 

setTimeout(function() { 
    jQuery.ajax({ 
     url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php', 
     type: 'POST', 
     data: {'bsnname': bsnname, 'bsnsubject': bsnsubject, 'bsnemail': bsnemail, 'bsnmessage': bsnmessage}, 
     dataType: 'json', 
     cache: false, 
     success: function (data) { 
      // Some code here work correctly 
     }, 
     error: function() { 
      // Some bug messages 
     }, 
     complete: function() { 
      // good place to change the button back to its original text 
     } 
    }); 
}, 5000);

Но самый большой вопрос, который вы должны задать себе, - это то, что вам нужно сделать? Вы просто хотите отложить запрос на изменение текста кнопки.

Редактировать: Вот, пожалуйста, demo того, что, я думаю, вы хотите.

источник

2016-05-04 22:13:34 Mikey

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

Нет, я хочу, когда я нажимаю «Отправка сообщения», и все, что находится в моей контактной форме, в порядке (означает, что у вас нет ошибок, таких как пустые поля), затем измените текст на 5 секунд, а затем сообщите об этом успешное сообщение. Спасибо, ваше сообщение отправлено. –

Это означает, что вам нужно проверить свою форму перед тем, как сделать запрос AJAX, например, использовать JavaScript для проверки ваших полей. Если все хорошо, то сделайте выше. – Mikey

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

Сложно для пользователя иметь сообщение о том, что оно загружается, тогда как результат уже существует.

Я не думаю, что вы должны использовать функцию SetTimeout в этом случае ...

источник

2016-05-04 22:32:41 Mantisse

jQuery Ajax setTimeout в функции beforeSend во время отправки формы

ответ

Смежные вопросы