javascript 使用计时器自动提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18045305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto submit form using timer
提问by dali1985
I wrote the following code. With this code pushing Submit button submits the form manually. I have also a timer which I want to auto submit the form after 10 seconds. But it does not work. It counts until 0 and then it does not do anything. Can you please tell me what I am missing or how to change my timer (if there, is the problem)? But I want the user to watch the timer as my example
我写了以下代码。使用此代码按提交按钮手动提交表单。我还有一个计时器，我想在 10 秒后自动提交表单。但它不起作用。它一直计数到 0，然后它什么也不做。你能告诉我我遗漏了什么或如何更改我的计时器（如果有，是问题所在）吗？但我希望用户以我的示例观看计时器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function countDown(secs,elem)
{
var element = document.getElementById(elem);
element.innerHTML = "<h2>You have <b>"+secs+"</b> seconds to answer the questions</h2>";
if(secs < 1){
clearTimeout(timer);
document.getElementById('myquiz').submit();
}
secs--;
var timer = setTimeout ('countDown('+secs+',"'+elem+'")',1500);
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>
<title>Questionnaire</title>
<style type="text/css">
span {color: #FF00CC}
</style>
</head>
<body>
<h1>Please complete the following Survey</h1>
<form name="quiz" id ="myquiz" method="post" action="includes/process.php">
First Name: <input type="text" name="firstname" id="fname"/>
<p></p>
Last Name: <input type="text" name="lastname" id="lname"/>
<p></p>
<input type="submit" name="submit" value="Go"></input>
<input type="reset" value="clear all"></input>
</form>
</body>
</html>
采纳答案by ep0
Don't do this:
不要这样做：
var timer = setTimeout ('countDown('+secs+',"'+elem+'")',1500);
in countDown. Every 1500 you're calling countDownagain.
在countDown. 每 1500 次，您就会countDown再次致电。
Put this at the bottom of the page (before closing bodytag)
把它放在页面底部（在关闭body标签之前）
<script type="text/javascript">
secs = 10;
timer = setInterval(function () {
var element = document.getElementById("status");
element.innerHTML = "<h2>You have <b>"+secs+"</b> seconds to answer the questions</h2>";
if(secs < 1){
clearInterval(timer);
document.getElementById('myquiz').submit();
}
secs--;
}, 1000)
Btw: where is validate()declared ?
顺便说一句：在哪里validate()声明？
Didn't test it, but it should do the trick.
没有测试它，但它应该可以解决问题。
回答by Frizi
There are three errors producing this bug.
产生此错误的三个错误。
- You have a typo in form attributes. there is a space after
id. It should beid="myquiz". - Your form has a button named"submit", which is wrong. It overrides the function. Name it "submitbutton" or something other.
- The "validate" method is not defined. It should return true.
- 您在表单属性中有一个错字。之后有一个空格
id。应该是id="myquiz"。 - 您的表单有一个名为“提交”的按钮，这是错误的。它覆盖了该功能。将其命名为“提交按钮”或其他名称。
- “验证”方法未定义。它应该返回true。
By the way, the timeout has wrong time, it should be 1000.
对了，timeout有错误的时间，应该是1000。
Working example: plunk
工作示例：plunk
回答by RiggsFolly
You have to submit a form, not an element so try this:
你必须提交一个表单，而不是一个元素，所以试试这个：
document.forms["quiz"].submit();
OR if its the only form you can use
或者如果它是您可以使用的唯一形式
document.forms[0].submit();
回答by nejib
This Code will work:
此代码将起作用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function countDown(secs, elem)
{
var element = document.getElementById(elem);
element.innerHTML = "<h2>You have <b>"+secs+"</b> seconds to answer the questions</h2>";
if(secs < 1) {
document.quiz.submit();
}
else
{
secs--;
setTimeout('countDown('+secs+',"'+elem+'")',1500);
}
}
function validate() {
return true;
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(5,"status");</script>
<title>Questionnaire</title>
<style type="text/css">
span {
color: #FF00CC;
}
</style>
</head>
<body>
<h1>Please complete the following Survey</h1>
<form name="quiz" id="myquiz" onsubmit="return validate()" method="post" action="includes/process.php">
First Name: <input type="text" name="firstname" id="fname"/>
<p></p>
Last Name: <input type="text" name="lastname" id="lname"/>
<p></p>
<input type="submit" name="submitbutton" value="Go"></input>
<input type="reset" value="clear all"></input>
</form>
</body>
</html>
回答by ?ēēpak
define function wait as
定义函数等待为
function caller()
{
setInterval(submit_now, 10000);
}
function submit_now()
{
document.forms["quiz"].submit();
}
Explaination:
说明：
1). Function wait()will set a time interval of 10 seconds (10000) ms before it calls submit_now()function.
1）。函数wait()将在调用submit_now()函数之前设置 10 秒（10000）毫秒的时间间隔。
2). On other hand submit_now()function do submit your form data when calling of this function is performed.
2）。另一方面，submit_now()在调用此函数时，函数会提交您的表单数据。
