javascript - 提交后让表单暂停？

Question

我正在尝试设计一个登录表单让我们这样说：

<form action="target.php" method="POST">
Username: <input type="text" name="user" id="user" /><br /><br />
Password: <input type="password" name="pass" id="pass" /><br /><br />
<input type="submit" value="submit" id="submit" />
</from>

我想要做的是让表单在用户点击提交时显示一些 pic.gif 3 秒然后继续我不希望它直接开始下一个进程。

Answer 1

让您的图像最初具有样式“display：none”并将您的表单声明修改为处理“onsubmit”事件：

<form action="target.php" method="POST" onsubmit = "mySubmit(this)">

然后定义函数：

function mySubmit(frm) {
    document.getElementById("myImg").style.display = 'block';
    setTimeout(function() {frm.submit()}, 3000);
    return false;
}

它将显示您的图像并取消原始提交请求。但 3 秒后它会从代码提交表单。

Answer 2

听起来您可以只使用 setTimeout() 函数。

<input type="submit" value="submit" id="submit" onclick="window.setTimeout(doStuffAfter, 30000)">

您可以以任何您想要的方式调用它，而 func 在延迟后被调用。因此，您可以打开图像，然后在延迟完成后导航离开。

 window.setTimeout(func, delay, [param1, param2, ...]); 

https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout

Answer 3

尝试

$('form').submit(function () {
  if (showPic()) {
    return true;
  } else {
    return false;
  }
}

从用户体验的角度来看，我建议在你的图片中给他们一个提示。