There is such a script

function handleSubmit() { document.getElementById("application").submit(); } function delaySubmit() { window.setTimeout(handleSubmit, 1000); // change this to whatever delay you need };

which sets a delay before clicking submit in the feedback form, the delay is needed to execute the animation after clicking the send button

How do I implement a click delay in the form of feedback on the condition so that all fields are correct / filled? otherwise, it sends without REQUIRED.

markup form with 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>' }); });

    1 answer 1

    I understand correctly, do you need a delay to implement the animation? And what prevents when you click on the submit-button to run the animation, and on completion of it - to send the contents of the form to the server? The simplest version would look something like this (semi-pseudocode)

     var form = document.querySelector('#application'); form.onsubmit = function (e) { e.preventDefault(); doSomeAnimationHere(); } function doSomeAnimationHere() { // тут код анимации form.submit(); }

    PS Looked at the animation code. There, the animation is done using css, not js, so you need to postpone the submit form for a specified time. Set the value of the type='button' attribute of the type='button' and remove the onclick attribute completely. The markup should be like this.

     <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>

    This code has worked for me:

     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; }
    • Animation, REQUIRED and sending do not work ((( - Karen
    • Updated the answer, try it - LivAlex
    • everything is still silent, nothing happens, but if you return type = "submit" then validation and sending works but without animation and delay - Karen
    • Look at the markup of the form once again I updated, that's how it actually looks from my because of the pop-up window - Karen
    • Updated the answer, try it - LivAlex