倒计时结束后提交表格

Submit form after countdown finishes

本文关键字:表格 提交 结束 倒计时      更新时间:2023-09-26

我只想在倒计时结束后提交文档(return_url)。在我下面的当前代码中,文档是在倒计时开始后提交的。如何在提交document_url之前完成倒计时?

代码:

<body>
    <center>
        <form name="redirect"><font face="Helvetica"><b>
            Thank you! You will be redirected in<input type="text" size="1" style="font-size:25px" name="redirect2">seconds.</b></font>
        </form></form>
    </center>
    <form name="return_url" method="post" action="confirm.php">
        <input type="hidden" name="order" value="1" />
        <input type="hidden" name="price" value="100" />
    </form>
</body>
</html>
<script language="javascript" type="text/javascript">
    var targetURL="<?php print_r($_POST['url_retorno']);?>"
    var countdownfrom=10
    var currentsecond=document.redirect.redirect2.value=countdownfrom+1
    function countredirect(){
        if (currentsecond!=1){
            currentsecond-=1
            document.redirect.redirect2.value=currentsecond
        } else {
            window.location=targetURL
            return
        }
        setTimeout("countredirect()",1000)
    }
    countredirect()
    document.return_url.submit()    
</script>

重点是,你不应该自动为用户提交表单,这是一种糟糕的用户体验设计。相反,你可以先等待再提交,这会禁用按钮,直到计时器结束。为此,您只需要使用javascript定时器。

var timer = window.setInterval(updateClock,1000);
var countdown = 10;
function updateClock() {
   countdown--;
   if(countdown<=0) {
       window.clearInterval(timer);
       //ALLOW THE FORM TO SUBMIT
       document.getElementById("elementID").disabled = false
   } else {
       document.getElementById("elementID").value = "PLEASE WAIT "+countdown+" SECONDS";
   }
}

我还补充了一点,你永远不应该相信人们在表格中所写的内容。查找XSS或跨站点脚本,以及SQL注入以找出原因。因此,您需要使用验证(即使是数字)。如果你想要页面验证(由于它可以被旁路,所以仍然不太安全),你可以在表单标签中添加一个onSubmit="validate()"属性,以便在用户最终提交时调用validate()函数。使用这个函数还可以在需要时接管表单,因为您可以在那里执行任何您想要的javascript,而简单地返回一个"false"值将导致表单无法提交。

始终在服务器级别(即confirm.php文件中)验证您的表单条目

尝试以下操作:

setTimeout(function() {document.return_url.submit();}, 10000);

这应该就是你所需要的。

或者,如果您想显示计时器,请使用setInterval();

var seconds_left = 10;
var timer = setInterval(countdown, 1000);
function countdown() {
    seconds_left--;
    if (seconds_left) {
        console.log(seconds_left); //or modify the DOM
    } else {
        document.return_url.submit();
        clearInterval(timer);
    }
}