Auto submit form using timer

2020-03-27 04:56发布

站内问答 / PHP
1569 5 4

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

<!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条回答
手持菜刀，她持情操
2楼-- · 2020-03-27 05:40

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.

2). On other hand submit_now() function do submit your form data when calling of this function is performed.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2020-03-27 05:42

There are three errors producing this bug.

  • You have a typo in form attributes. there is a space after id. It should be id="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.

By the way, the timeout has wrong time, it should be 1000.

Working example: plunk

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2020-03-27 05:43

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>
查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2020-03-27 05:49

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();
查看更多
0人赞 添加讨论(0) 举报
傲
6楼-- · 2020-03-27 05:59

Don't do this:

var timer = setTimeout ('countDown('+secs+',"'+elem+'")',1500);

in countDown. Every 1500 you're calling countDown again.

Put this at the bottom of the page (before closing body tag)

<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 ?

Didn't test it, but it should do the trick.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)