Есть такой скрипт
function handleSubmit() {
document.getElementById("application").submit();
}
function delaySubmit() {
window.setTimeout(handleSubmit, 1000); // change this to whatever delay you need
};
который устанавливает задержку пред нажатием submit в форме обратной связи, задержка нужна для исполнение анимации после нажатия на кнопку отправить
как мне реализовать задержку по клику в форме обратной связи по условию чтоб все поля были правильно/заполнены ? иначе он выполняет отправку без REQUIRED
разметка формы с required
document.querySelector('.openPopup').addEventListener('click', function() {
var jPopupDemo = new jPopup({
contentHtml: '<strong>Это быстро!</strong>\
<p>Молниеносная регистрация, за 16 секунд</p>\
<form id="application" action="application.php" method="POST" name="application">\
<input name="name" id="applicationName" maxlength="20" placeholder="Имя и фамилия" autocomplete="off" required />\
<input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Ваш E-mail" autocomplete="off" required />\
<input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Номер телефона" autocomplete="off" required />\
<button class="applicationButton" type="button" form="application"><p style="display:inline">Отправить</p><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path></svg></button>\
</form>'
});
});
Я правильно понимаю, задержка Вам нужна для реализации анимации? А что мешает при нажатии на submit-кнопку запускать анимацию, а по завершению ее - отправлять содержимое формы на сервер? Простейший вариант будет выглядеть примерно так (полу-псевдокод)
var form = document.querySelector('#application');
form.onsubmit = function (e) {
e.preventDefault();
doSomeAnimationHere();
}
function doSomeAnimationHere() {
// тут код анимации
form.submit();
}
P.S. Глянул код анимации. Там анимация делается с помощью css, а не js, поэтому нужно отложить submit формы на заданное время.
У кнопки установить значение атрибута type='button'
и убрать полностью атрибут onclick
.
Разметка должна быть такой
<form id="application" action="application.php" method="POST" name="application">
<input name="name" id="applicationName" maxlength="20" placeholder="Имя и фамилия" autocomplete="off" required />
<input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Ваш E-mail" autocomplete="off" required />
<input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Номер телефона" autocomplete="off" required />
<button class="applicationButton" type="button" form="application">
<p style="display:inline">Отправить</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
</svg>
</button>
Такой код у меня отработал:
var $f = $('#application');
$('.applicationButton').click(function() {
if (isDataValid()) {
$(this).toggleClass('clicked');
$('button p').text(function(i, text) {
return text === "Sent!" ? "Send" : "Sent!";
});
setTimeout(function() { $f.submit(); }, 1300);
}
});
function isDataValid() {
if ($f[0].name.checkValidity() &&
$f[0].email.checkValidity() &&
$f[0].telephone.checkValidity()) {
return true;
}
return false;
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Здравствуйте, нужно отделить ленту новостей для стран СНГ от общейТо есть, если пользователь зашел на сайт из СНГ, выводим одну ленту, если...
здравствуйте! Решил установить в свой небольшой проект один пакет из packagist, но заметил что вместе с запрашиваемым пакетом установились также...