想要按下输入时显示的文本，三秒钟后它将重定向到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;
}

想要按下提交按钮时显示的成功文本，三秒钟后它将重定向到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;

});