I'm trying to submit the document (return_url) only after the countdown finishes. In my current code below the document is submitted just after the countdown starts. How can I make the countdown finish before submitting the document_url?
Code:
<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>
Big point, you shouldn't automatically submit forms for users, it's kind of a bad UX design. Instead, you could do the wait before submiting thing which disables the button until the timer is up. And for that, you just need to make use of javascript timers.
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";
}
}
I'm also adding in a side point that you should never trust what people put into forms. Lookup XSS or cross site scripting, and SQL injection to find out why. So you need to use validation (even for numbers). If you want on page validation (which still isn't really secure since it can be by-passed) you could add a onSubmit="validate()" attribute to the form tag to call the validate() function when the user does finally submit it. Using this function also gives you the power to take over the form if needed, since you can execute any javascript you want there and simply returning a "false" value will cause the form to NOT submit.
ALWAYS VALIDATE YOUR FORM ENTRIES ON THE SERVER LEVEL (ie. in the confirm.php file)
Try the following:
setTimeout(function() {document.return_url.submit();}, 10000);
That should be all you need.
Or if you want to display the timer, use 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);
}
}