使用計時器自動提交表單
[英]Auto submit form using timer
問題描述
我寫了以下代碼。 使用此代碼按提交按鈕手動提交表單。 我還有一個計時器，我想在 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>
5 個解決方案
解決方案1
3 2013-08-04 17:08:13
產生此錯誤的三個錯誤。
- 您在表單屬性中有一個錯字。
id后面有一個空格。 它應該是id="myquiz"。 - 您的表單有一個名為“提交”的按鈕，這是錯誤的。 它覆蓋了該功能。 將其命名為“提交按鈕”或其他名稱。
- “驗證”方法未定義。 它應該返回true。
對了，timeout有錯誤的時間，應該是1000。
工作示例： plunk
解決方案2
1 已采納 2013-08-04 17:07:07
不要這樣做：
var timer = setTimeout ('countDown('+secs+',"'+elem+'")',1500);
在countDown 。 每 1500 次，您就會再次調用countDown 。
把它放在頁面底部（在關閉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)
順便說一句： validate()在哪里聲明？
沒有測試它，但它應該可以解決問題。
解決方案3
1 2013-08-04 17:17:07
你必須提交一個表單，而不是一個元素，所以試試這個：
document.forms["quiz"].submit();
或者如果它是您可以使用的唯一形式
document.forms[0].submit();
解決方案4
1 2013-08-04 17:25:54
此代碼將起作用：
<!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>
解決方案5
0 2013-08-04 17:25:14
定義函數等待為
function caller()
{
setInterval(submit_now, 10000);
}
function submit_now()
{
document.forms["quiz"].submit();
}
說明：
1）。 函數wait()將在調用submit_now()函數之前設置10 秒（10000）毫秒的時間間隔。
2）。 另一方面，在調用此函數時， submit_now()函數會提交您的表單數據。
計時器后提交表格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.