Javascript表单未在提交时重定向答案

【问题标题】：Javascript form not redirecting on submitJavascript表单未在提交时重定向
【发布时间】：2020-10-13 13:03:12
【问题描述】：

我的表单正在调用以下函数。它在桌面上运行，用户被定向到下载确认/失败页面。

但是，在移动设备上（在 iOS 和 iPad 上测试），用户不会被重定向。有人能解释一下吗？

功能

function submit_form()
{
    var email = document.getElementById("main-email-field").value

    // todo email validation
    if (email.length > 7)
    {
        window.location = '/download-confirmation'
    }
    else
    {
        window.location = '/download-failed'
    }
    return false;
}

表格

<form id="main-email-form" class="email-form" method="POST" onsubmit="submit_form()" action="https://europe-west1-hoddle-website.cloudfunctions.net/registerUser" target="hiddenFrame">
    <input id="main-email-field" class="main-email-field" type="email" name="email" placeholder="Email address">
    <button id="main-email-button" class="main-email-button">Download</button>
    <input type="hidden" id="main-referralID-field" name="referralID" value="">
    <input type="hidden" id="main-referralType-field" name="referralType" value="">
    <input type="hidden" id="main-referralUserID-field" name="referralUserID" value="">
    </form>
    
    <iframe id="hiddenFrame" class="hiddenFrame" name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

【问题讨论】：

如果你也想重定向，你需要使用 setTimeout
@mplungjan 谢谢，我该怎么做呢？
感谢您返回旧问题 :)

标签： javascript html jquery ajax forms

【解决方案1】：

试试这个 timeout 和 preventDefault 的组合

window.addEventListener("load", function() {
  document.getElementById("main-email-form").addEventListener("submit", function(e) {
    const email = document.getElementById("main-email-field").value
    // todo email validation
    console.log(email,email.length); 
    if (email.length > 7) {
      setTimeout(function() {
        console.log("Download allowed");
        // window.location = '/download-confirmation'; // uncomment after testing
      }, 2000)
    } else {
      e.preventDefault(); // stop submission
      console.log("Download failed");
      // window.location = '/download-failed'; // uncomment after testing
    }
  })
})

<form id="main-email-form" class="email-form" method="POST" action="https://europe-west1-hoddle-website.cloudfunctions.net/registerUser" target="hiddenFrame">
  <input id="main-email-field" class="main-email-field" type="email" name="email" placeholder="Email address">
  <button type="submit" id="main-email-button" class="main-email-button">Download</button>
  <input type="hidden" id="main-referralID-field" name="referralID" value="">
  <input type="hidden" id="main-referralType-field" name="referralType" value="">
  <input type="hidden" id="main-referralUserID-field" name="referralUserID" value="">
</form>

<iframe id="hiddenFrame" class="hiddenFrame" name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

【讨论】：