Перенаправление после отправки со счетчиком

Question

Я пытаюсь перенаправить со счетчиком на другую страницу.Я хочу, чтобы перенаправление началось после отправки формы.Я хочу перенаправить на другую страницу после отправки формы.

var count = 6;
var redirect = "https://www.google.com";

function countDown() {
  var timer = document.getElementById("timer");
  if (count > 0) {
    count--;
    timer.innerHTML = "This page will redirect in " + count + " seconds.";
    setTimeout("countDown()", 1000);
  } else {
    window.location.href = redirect;
  }
}

<form method="post">
  <p>
    <label>Name
      <input type="text" name="textfield">
    </label>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit"><br>
</form>

<span id="timer">
  <script type="text/javascript">countDown();</script>
</span>

</p>

Answer 1

Форма отправки - это всегда запрос к серверу. Вы можете использовать ajax для отправки формы или просто посчитать и отправить форму позже.

Чтобы запретить отправку формы, когда пользователь нажимает кнопку, вы можете запретить поведение по умолчанию, например:

$('input [type=submit]').on('click', function( event ) {
    event.preventDefault();
    // use your counter here
    // when counter hits 0 just submit the form with
    $('form').submit();
});

или используйте вызов ajax:

$('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: 'url/to/form/action',
        data: $(this).serialize(),
        method: "POST",
        success: function() {
            // start your counter
            // REDIRECT
        }
    });
});

Проблема с первым методом заключается в том, что вы просто откладываете отправку формы. Во втором случае вы не можете с уверенностью сказать, когда вы получите успешный (или ошибочный) ответ, поскольку вызов асинхронный. Это приведет либо к задержке до запуска вашего счетчика, либо к возможной задержке после его окончания, если сервер до этого не отвечал.

Answer 2

Вы можете получить счетчик, используя setInterval и делая проверку, пока он не достигнет 0, чтобы перенаправить:

<form method="post">
  <p>
    <label>Name
  <input type="text" name="textfield">
  </label>
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
    <br>
</form>

<span id="timer">This page will redirect in <span id="count"></span> second(s).</span>
<script type="text/javascript">
  var count = 6;
  var redirect = "https://www.google.com";
  var elem = document.getElementById('count');
  elem.innerText = count
  
  setInterval(() => {
    count--
    elem.innerText = count
    if (count == 0) {
      window.location.href = redirect;
    }
  }, 1000)
</script>