Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    sys
    sys is offline
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Bulgaria
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript countdown (disabling submit button)

    Hey there,
    I'm currently making a login form for my site and I want to make a small protection. If someone tries to login with false login information the submit button has to disable itself for 5 seconds and add a timer to the submit button.
    I'm doing it with PHP and I have done everything except the javascript part.
    I found this script, but I can't make it show as a prefix in the submit button and make it enabled when timer has reached 0.

    Code:
    			<script type = "text/javascript">
    			/*author Philip M. 2010*/
    
    			var timeInSecs;
    			var ticker;
    
    			function startTimer(secs){
    			timeInSecs = parseInt(secs)-1;
    			ticker = setInterval("tick()",1000);   // every second
    			}
    
    			function tick() {
    			var secs = timeInSecs;
    			if (secs>0) {
    			timeInSecs--;
    			}
    			else {
    			clearInterval(ticker); // stop counting at zero
    			// startTimer(60);  // remove forward slashes in front of startTimer to repeat if required
    			}
    
    			document.getElementById("countdown").innerHTML = secs;
    			}
    
    			startTimer(30);
    
    			</script>
    Sorry for my bad english. If you don't understand something just ask and I'll try to say it with other words.
    Regards,Sys.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    <html>
    <head>
    </head>
    <body>
    
    <span id = "countdown"></span>
    <input type = "submit" id = "subbutton" value = "Submit Disabled" disabled>
    
    <script type = "text/javascript">
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    tick();  // start timer right away
    ticker = setInterval("tick()",1000);   // every second
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("subbutton").disabled = false;
    document.getElementById("subbutton").value = "Submit Enabled";
    
    }
    
    document.getElementById("countdown").innerHTML = secs;
    }
    
    startTimer(5);
    
    </script>
    
    </body>
    </html>

    "In Germany they came first for the Communists, and I didn't speak up because I wasn't a Communist.
    Then they came for the Jews, and I didn't speak up because I wasn't a Jew. Then they came for the trade unionists,
    and I didn't speak up because I wasn't a trade unionist. Then they came for the Catholics, and I didn't speak up
    because I was a Protestant. Then they came for me, and by that time there was no one left to speak up." -
    Martin Niemöller, German Lutheran Pastor.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    sys (08-07-2012)

  • #3
    sys
    sys is offline
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Bulgaria
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks! Awesome, but can you make the countdown directly in the submit button? And the zero to disappear when it reaches 0?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by sys View Post
    Thanks! Awesome, but can you make the countdown directly in the submit button? And the zero to disappear when it reaches 0?
    Surely you can do this simple adjustment yourself? Just move this one line and replace countdown by subbutton:-

    Code:
    if (secs>0) {
    timeInSecs--;
    document.getElementById("subbutton").value = secs;
    }
    Obviously the <span id = "countdown"></span> is no longer required.
    Last edited by Philip M; 08-07-2012 at 08:20 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    sys (08-07-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •