Как сделать задержку на button на переход по ссылке?

Question

[MelPosp]

Есть код формы:

<button type="submit" onclick="document.getElementById('link').click()" data-target="_blank">Скачать</button> 
<a id="link" target="_blank" href="/sostavy_betonov_sut.doc" download hidden></a>

При клике на кнопку происходит отправка формы и переход по ссылке. Только вот форма не успевает отправится, сразу происходит переход по ссылке. Как сделать задержку в переходе по ссылке на 2-3 секунды? что бы форма успела отправится

Answer 1

[Александр Вульф]

Никогда не делайте задержку "в 2-3 секунды, авось успеет". Точно не успеет когда-нибудь. Надо всегда полагаться только на железные факты. Я бы предложил сделать отправку формы аяксом, ловить получение ответа от сервера и после этого уже редиректить пользователя.

Comments

[MelPosp]

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

[Александр Вульф]

MelPosp, есть возможность script воткнуть?

[MelPosp]

Александр Вульф, Да

[Александр Вульф]

MelPosp, форма отправляется GET или POST?

[MelPosp]

post

[MelPosp]

post на get увы изменить нельзя система сама формирует

[Александр Вульф]

MelPosp, а ссылку можно сменить у формы?

[MelPosp]

В исходном коде форма выглядит так (то что жирным выделено - меняется, + можно js код какой то применить):

<form method="post" name="mform" id="mffMZZrU" style="margin:0" enctype="multipart/form-data" onsubmit="funMZZrU(); return false;">
<input type="hidden" name="jkd498" value="1">
<input type="hidden" name="jkd428" value="1">
<b><div style="max-width:400px"><input type="text" name="f1" style="display:none;" value="[e-mail]">
<input class="one-click-field" type="text" name="f3" placeholder="Введите ваше имя">
<input class="one-click-field" type="tel" name="f2" placeholder="Введите номер вашего телефона">
<input type="hidden" name="redirect_to" value="/sostavy_betonov_sut.doc">
<button type="submit">Скачать</button> 
</div></b>
<input type="hidden" name="id" value="46">
<input type="hidden" name="a" value="1">
<input type="hidden" name="o" value="1">
</form>

[MelPosp]

жирный не применился, в общем то что между и та часть меняется

[MelPosp]

между Б и /Б

Answer 2

[Alex]

Отправка формы это ж не что-то в фоне. Это точно такой же переход по ссылке, только с дополнительными данными. А вы перенаправляете браузер с одной ссылки на другую.
Так что тут два варианта:

1. Вместе с формой отправляете ссылку redirect_to. Например в скрытом поле

   <input type="hidden" name="redirect_to" value="/sostavy_betonov_sut.doc">

   . Когда обработчик закончит работу - он выполнит редирект по указаному путии
   
2. Отправляйте не саму форму, а собирайте данные с неё и отправляйте на сервер ajax-ом. Когда сервер ответит, что данные приняты и обработыны — запустите callback, в вашем случае переход по указанной ссылке
   

Comments

[MelPosp]

Сделал так:

<div style="max-width:400px"><input type="text" name="f1" style="display:none;" value="[e-mail]">
<input class="one-click-field" type="text" name="f3" placeholder="Введите ваше имя">
<input class="one-click-field" type="tel" name="f2" placeholder="Введите номер вашего телефона">
<input type="hidden" name="redirect_to" name="f4" value="/sostavy_betonov_sut.doc">


<button type="submit">Скачать</button>

Ничего не загружается после отправки формы

[MelPosp]

Вот так точнее

<div style="max-width:400px"><input type="text" name="f1" style="display:none;" value="[e-mail]">
<input class="one-click-field" type="text" name="f3" placeholder="Введите ваше имя">
<input class="one-click-field" type="tel" name="f2" placeholder="Введите номер вашего телефона">
<input type="hidden" name="redirect_to" value="/sostavy_betonov_sut.doc">


<button type="submit">Скачать</button> 

</div>

[Alex]

MelPosp, Ну, а ваш обработчик как-то обрабатывает переменную redirect_to? Добавляет редирект по данному адресу?

[MelPosp]

Alex, нет, я только input добавил который Вы указали

[Alex]

MelPosp, А должен

Answer 3

[Pavel Shvedov]

const fd = new FormData();
fd.append(...);
fetch(url, { method: 'POST', body: fd }).then(() => { /* redirect here */ })

Comments

[MelPosp]

Там форма без php, закрытая CMS система

есть только такой код

<div style="max-width:400px"><input type="text" name="f1" style="display:none;" value="[e-mail]">
<input class="one-click-field" type="text" name="f3" placeholder="Введите ваше имя">
<input class="one-click-field" type="tel" name="f2" placeholder="Введите номер вашего телефона">
<input type="hidden" name="redirect_to" value="/sostavy_betonov_sut.doc">


<button type="submit">Скачать</button> 

</div>

[Pavel Shvedov]

MelPosp, и где из текста вопроса человек, при написании ответа, должен узнавать такие ньюансы?

[MelPosp]

Pavel Shvedov, извините

Answer 4

[Robur]

у вас при отправке вызывается funMZZrU();
Вы можете переопределить эту функцию - самый простой способ просто скопипастить код из старой функции в новую и добавить туда строчку с нужным действием после того как запрос отработает.