Как решить проблему анимации кнопки в форме (input[type="submit"])?

Question

[kkoshakk]

Проблема в том, что есть некий эффект ripple на кнопке, который должен срабатывать при клике на нее, но в реальности при клике анимация еле заметна. Я так понял, это из-за type="submit" в тэге form. Как можно побороть эту проблему средствами CSS?

Comments

[Максим Тимофеев]

Я так понял, это из-за type="button"

с чего вы это поняли? И как Вам помочь без кода?

[kkoshakk]

Максим Тимофеев: Я извиняюсь, type=submit, при нажатии на кнопку происходит отправка данных на сервер и анимация не успевает сработать и страница перегружается и кнопка становится в исходном состоянии. Вот у меня и вопрос, как можно исправить такое поведение?

[Максим Тимофеев]

kkoshakk: отловить с помощью js событие submit и сделать timeout нужного размера

[kkoshakk]

А как обойтись без js???

[kkoshakk]

Максим Тимофеев: А как именно отловить событие и сделать timeout?

[Максим Тимофеев]

kkoshakk:

$("#my_form").submit(function(event){
        event.preventDefault(); //отменяем отправку
        setTimeout(function(){$("#my_form").submit();}, 3000); //отправляем через 3000 ms
    });

[kkoshakk]

Максим Тимофеев: А я могу этот скрипт добавить в bootstrap.js?

[kkoshakk]

Submit

[Максим Тимофеев]

kkoshakk: Зачем его добавлять в bootstrap.js? Как потом его обновлять, если его дописывать?

[kkoshakk]

Максим Тимофеев: Понял, не буду, а еще такой вопросик, анимация работает как-надо, все ok, но перегрузки страницы после нажатия кнопки не происходит, так и должно быть или в скрипт нужно дабавить это: setTimeout(function () {window.location.reload();}, 3000);

[Максим Тимофеев]

kkoshakk: А запрос отправляется? Если да - то должен быть редирект. Видимо post не уходит

[kkoshakk]

ну если без скрипта - то отрабатывает редирект, а если вставить скрипт, редиректа нет

[kkoshakk]

Максим Тимофеев: А может мне вообще не нужно использовать задержку при отправке? Моя анимация на кнопке имеет продолжительность 0,4 сек. В реальности же submit сработает где-то за 1 сек., за это время моя анимация отработает уже. Это на локалхосте submit отрабатывает моментально или я не прав?

Answer 1

[Саша]

Проблема скорее всего в отсутствии закрывающего тега.

Comments

[Саша]

Как вариант, можно сделать фэйковую кнопку, и с помощью js передавать клик с неё на кнопку формы, если в ней нельзя использовать

[kkoshakk]

Саша: Подскажите, пожалуйста как сделать эту фейковую кнопку?

[Саша]

kkoshakk: простую кнопку делаете, стилите и через дата атрибут привязываетесь к id скрытой кнопки в формы, а при клике на фейковую передаете клик с помощью атрибута на кнопку в форме.

[kkoshakk]

Саша: если сделать фейковую кнопку, JavaScript всеравно прийдется использовать или можно без него?

[Саша]

kkoshakk: да, нужно будет использовать.
можно конечно попробовать застилить label и в него положить вашу скрытую кнопку