3

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

$("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 ответ 1

4

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

4
  • 2
    Только disabled а не disable, насколько помню. disabled="disabled".
    – jekaby
    26 фев 2017 в 22:39
  • @jekaby да, голова уже не варит, в коде так и написал. Спасибо! 26 фев 2017 в 22:41
  • я вычитал что нужно где-то добавить beforeSend, просто в javascript не силен, не понимаю какие могут быть проблемы, изначально добавить в класс кнопки скрытый ГИФ прелоадер, а после нажатия чтоб он отображался
    – Max
    27 фев 2017 в 6:10
  • @Max а, ну если в этом еще вопрос был, то смотрите обновление моего ответа. И да, вы можете сделать такой прелоадер, просто я за вас точно не могу решить, будет это гифка или что-то еще, но в целом да, вы можете сделать именно так - использовать мой код, а в css прописать у кнопки с модификатором disabled в true показ вашего гифа и наоборот 27 фев 2017 в 6:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.