倒计时结束后提交表格
Submit form after countdown finishes
我只想在倒计时结束后提交文档(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);
}
}