希望在按下提交输入时显示文本，并在 3 秒后重定向到 Index.html

Question

当提交输入被按下时，该站点需要显示一些文本，当文本显示时，计时器会启动（3 秒）然后返回到 ../index.html

HTML

<label for="fname">Fornavn</label>
<input type="text" id="fname" name="firstname" placeholder="Ditt fornavn.." required>

<label for="lname">Etternavn</label>
<input type="text" id="lname" name="lastname" placeholder="Ditt etternavn.." required>

<label for="country">Fylke</label>
<select id="country" name="country">
  <option value="australia">Agder</option>
  <option value="canada">Rogaland</option>
  <option value="usa">Viken</option>
</select>

<label for="subject">Tema</label>
<textarea id="subject" name="subject" placeholder="Hva gjelder det.." style="height:200px" required></textarea>

<input id="submitNew" type="submit" value="Send inn">
</form>
</div>
</div>
<div id="success" hidden> 
  <p><center><strong>Vellykket</strong></center>Du har Vellykket Sendt inn</p>
</div>

Javascript

    function myFunction1() {
  var x = document.getElementById("success");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function formSubmit(form) {
    document.getElementById("submitNew").value = "Loading...";
    setTimeout(function() {
        form.submit();
    }, 3000);  // 3 seconds
    return false;
}

希望在按下提交按钮时显示成功文本，并在 3 秒后重定向到 Index.html

Answer 1

首先将您的代码包装在带有 id 和 action="index.html" 的表单标签中

<form id="form1" action="index.html">
<!-- your html fields and buttons here -->
</form>

然后，在您的脚本中，将表单分配给一个变量并为提交添加一个监听器。

请注意，e.preventDefault() 将避免您的表单立即提交，然后调用您的函数显示消息并 setTimeout 提交。

var form = document.getElementById('form1');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();
  document.getElementById("submitNew").value = "Loading...";
  myFunction1();
  setTimeout(function() {
      form.submit();
  }, 3000);  // 3 seconds
  return false;

});