Как добавить прелоадер кнопке в контактной форме?

Question

[gretyl007]

Добрый день. Есть контактная форма:

<form method="post" action="crm/mail.php" class="form__info js-form-check" onsubmit="return checkBeforeSubmit()">
            <input type="text" name="name" placeholder="Введите Имя" pattern="[А-Яа-яЁёA-Za-z]{3,}[А-Яа-яЁёA-Za-z\s]*" required class="info__field contact-info__field_text info__field_text info__field_name">
            <input type="text" name="phone" placeholder="Введите Телефон" required class="info__field contact-info__field_text info__field_text info__field_phone js-mask">
            <textarea name="help" placeholder="Чем мы можем вам помочь?" class="info__field contact-info__field_text info__field_text info__field_textarea info__field_edit"></textarea>
            <input type="submit" value="Отправить" class="info__field info__field_submit">
          </form>

Отправка данных происходит с задержкой в несколько секунд и пока пользователь ждет, может нажать на кнопку отправки повторно.
Как добавить к кнопке отправки анимацию, чтобы было понятно, что отправка совершается?

Answer 1

[jugo45]

Попробуйте сделать анимацию по нажатию на кнопку. При отправке формы страница обновится и анимация исчезнет.

Comments

[gretyl007]

То есть, необходимо написать скрипт для события клик, верно? Например, приписать по клику кнопке какой-то класс, а для стилей этого класса добавить изображение?

[Анатолий Куликов]

gretyl007, да, примерно так. Можете с помощью псевдоэлементов также сделать нечто красивое.

[Сергей Карвасарный]

gretyl007, только не забывай если у тебя проверка на заполнение полей стоит чтобы не получилось так, что ты нажал выдало ошибку что поле не заполнено и кнопка стала вида, что уже не доступна))

[gretyl007]

Сергей Карвасарный, только хотела об этом спросить. Как этого избежать?

[Сергей Карвасарный]

gretyl007, по факту сначала должна быть проверка и как только все проверки удовлетворяют и жмется кнопка тогда только делать ее неактивной
let choto = false;
if(проверка 1 поля на заполнение === пустое){
покрасить в краснный и не выполнять отправку формы
} else {
добавить код на кнопку о не доступности кнопки и отправить код формы
}

[Сергей Карвасарный]

Может как-то так, если поле заполнили то убирать disabled с кнопки можно проверять на нажатие кнопки или заморочиться с keyDown keyUp и т.п
gretyl007,

[gretyl007]

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

[Сергей Карвасарный]

gretyl007, ну так я показал для примера, конечно надо делать проверки и т.п я не делал готовую форму