Прелоадер при отправке формы

#php #javascript #jquery #ajax

Добрый день, есть универсальная форма обратной связи, работает вот с этим скриптом:

$("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      location="http://mysite.com/thankyou.html";
    });
    return false;
  });`


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

Ответы

Ответ 1

Сделайте проще - используйте атрибут disabled, дабы пользователь видел сереющую кнопку
и не только понимал, что никуда жать не надо, но и не мог нажать даже при очень большом
желании.

Собственно, можно изменять этот атрибут не только у кнопки отправки формы, но и у
всей формы. Тогда вам будет достаточно прописать css-правила для элементов формы, которые
будут изменять форму, и всем все будет понятно. Впрочем, скорее всего и без особых
правил вас вполне устроит вид элементов формы, у которой установлен этот атрибут.

Задизаблить все элементы ввода на форме можно примерно так:

f.find(':input').attr("disabled", true);


Где f - это указатель на вашу форму, если вы используете JQuery (а вы его используете).

Отдельно кнопку, понятное дело, примерно так:

b.attr("disabled", true);


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

Если у вас вопрос еще и в том, где разместить упомянутый выше код, то в текущих версиях
библиотеки запись $.ajax()такова (я привожу свою версию прелоадера, когда просто отключаем
все элементы ввода):

$.ajax({
    url: u,
    type: 'POST',
    data: d,
    success: function () {
        //
    },
    beforeSend: function () {
        // запускаем прелоадер
        f.find(':input').attr("disabled", true);
    },
    complete: function () {
        // останавливаем прелоадер
        f.find(':input').attr("disabled", false);
    },
    error: function () {
        //
    }
});


Как несложно догадаться, один код в любом случае выполнится перед запуском, второй
в любом случае - по окончанию, вне зависимости от успешности выполнения ajax-запроса
(ну, если только ваш код в error или success ошибку исполнения быстрее не выдаст).