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

420

28 февраля 2017, 17:01

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

$("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 секунд, иногда сразу отправляется. И вот когда форма "тормозит", хочется нажать на кнопку "еще". Помогите сделать прелоадер. То есть, чтобы после нажатия на кнопку "отправить", в стиле этой кнопки появлялся прелоадер с анимацией. Тогда пользователю будет понятно, что что-то происходит и не будет повторных нажатий.

Answer 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 ошибку исполнения быстрее не выдаст).