How to add countdown timer to button

hello people happy new yr.

Please i have a button thats disables on press for a period of time, which works fine but i want to add counter to it so users can see it counting down thank you.

<input type="button" id="submit" value="submit" class="btn" />
<script type="text/javascript">

$(function(){
    Program.Init();
});

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },

    EnableSubmit: function(){
        var value = this.Cookies.Get('submit_button');
        var now = Date.now();
        if( !value ) {
            this.$target.removeAttr("disabled");
            return;
        }
        setTimeout(function() { Program.EnableSubmit(); }, value - now);
    },

    Submit: function(){
        this.$target.attr("disabled", true);
        this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });
        setTimeout(function() { Program.EnableSubmit(); }, 10000);
    },

    EventHandler: function(){
        this.$target.on('click', function(){ Program.Submit(); });
    },

    // methods to manage cookies easily used above
    Cookies: {

        Get: function (name) {
            var n, ca, c;
            n = name + "=";
            ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                c = ca[i].trim();
                if (c.indexOf(name) === 0) return c.substring(name.length + 1, c.length);
            }
            return false;
        },

        Set: function (name, value, expire, options) {
            var d = new Date(), expires;
            var defaults = { expire_in: 'days', path: '/' };
            if (options !== undefined) $.extend(true, defaults, options);
            if (expire !== undefined && expire !== null) {
                if (defaults.expire_in == 'days') d.setDate(d.getDate() + expire);
                else if (defaults.expire_in == 'minutes') d.setTime(d.getTime() + (expire * 60 * 1000));
                else {
                    console.log('expire_in configuration is not valid');
                }
                expires = "expires=" + d.toGMTString();
            }
            else expires = expires = "";
            document.cookie = name + "=" + value + "; " + expires + '; path=' + defaults.path;
            return true;
        }

    }

};

</script>

Hi,

You would start the timer inside the Submit function:

Submit: function(){
  this.$target.attr("disabled", true);
  this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });
  this.StartTimer();
  setTimeout(function() { Program.EnableSubmit(); }, 10000);
},

Obviously this means you will have to augment your code with this functionality:

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },

   ...

  StartTimer: function(){
    ...
  }
};

Why not have a stab at writing the timer code yourself. Here’s a good tutorial to follow:

hi thanks for the reply, javascript aint my thing i barely can hold on to php as it is till managing thou, and about the countdown how do i integrate that, thanks

Hey,

I’m afraid I don’t currently have time to write your code for you. Maybe someone else will?

Other than that if you can have an attempt to integrate the timer code I linked to into your page (even if you fail miserably) and then post the results here, I’ll have a look and see if I can help you.

ok will try it out but which of the codes am i trying to use.

theses

Submit: function(){
  this.$target.attr("disabled", true);
  this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });
  this.StartTimer();
  setTimeout(function() { Program.EnableSubmit(); }, 10000);
},

or theses

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },

   ...

  StartTimer: function(){
    ...
  }
};

or both

Both :slight_smile:

I was just trying to show you where to add this extra functionality.

oh okay lol see no idea about it, will give it a dive all d same thanks update u later

1 Like

Good stuff.

If you run into trouble, the important thing is to come back with some (minimal) code that we can run and which demonstrates your problem.

added the codes now it doesnt work when i click the button

<style type='text/css'> /* Lets use a Google Web Font :) */
       input[disabled] {
    background-color:#FF6347;
}
 
     </style>

<input type="button" id="submit" value="submit" class="btn" />
<script type="text/javascript">

$(function(){
    Program.Init();
});

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },
 StartTimer: function(){
    ...
  }
    EnableSubmit: function(){
        var value = this.Cookies.Get('submit_button');
        var now = Date.now();
        if( !value ) {
            this.$target.removeAttr("disabled");
            return;
        }
        setTimeout(function() { Program.EnableSubmit(); }, value - now);
    },

    Submit: function(){
  this.$target.attr("disabled", true);
  this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });
  this.StartTimer();
  setTimeout(function() { Program.EnableSubmit(); }, 10000);
},

    EventHandler: function(){
        this.$target.on('click', function(){ Program.Submit(); });
    },

    // methods to manage cookies easily used above
    Cookies: {

        Get: function (name) {
            var n, ca, c;
            n = name + "=";
            ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                c = ca[i].trim();
                if (c.indexOf(name) === 0) return c.substring(name.length + 1, c.length);
            }
            return false;
        },

        Set: function (name, value, expire, options) {
            var d = new Date(), expires;
            var defaults = { expire_in: 'days', path: '/' };
            if (options !== undefined) $.extend(true, defaults, options);
            if (expire !== undefined && expire !== null) {
                if (defaults.expire_in == 'days') d.setDate(d.getDate() + expire);
                else if (defaults.expire_in == 'minutes') d.setTime(d.getTime() + (expire * 60 * 1000));
                else {
                    console.log('expire_in configuration is not valid');
                }
                expires = "expires=" + d.toGMTString();
            }
            else expires = expires = "";
            document.cookie = name + "=" + value + "; " + expires + '; path=' + defaults.path;
            return true;
        }

    }

};

</script>

Hi,

In the code you posted, the StartTimer function needs to be completed:

StartTimer: function(){
  ...
}
<style type='text/css'> /* Lets use a Google Web Font :) */
       input[disabled] {
    background-color:#FF6347;
}
 
     </style>

<input type="button" id="submit" value="submit" class="btn" />
<script type="text/javascript">

$(function(){
    Program.Init();
});

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },

    EnableSubmit: function(){
        var value = this.Cookies.Get('submit_button');
        var now = Date.now();
        if( !value ) {
            this.$target.removeAttr("disabled");
            return;
        }
        setTimeout(function() { Program.EnableSubmit(); }, value - now);
    },

    Submit: function(){
        this.$target.attr("disabled", true);
        this.Cookies.Set('submit_button', Date.now() + 8000, 0.25, { expire_in: 'minutes' });
        setTimeout(function() { Program.EnableSubmit(); }, 8000);
    },

    EventHandler: function(){
        this.$target.on('click', function(){ Program.Submit(); });
    },

    // methods to manage cookies easily used above
    Cookies: {

        Get: function (name) {
            var n, ca, c;
            n = name + "=";
            ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                c = ca[i].trim();
                if (c.indexOf(name) === 0) return c.substring(name.length + 1, c.length);
            }
            return false;
        },

        Set: function (name, value, expire, options) {
            var d = new Date(), expires;
            var defaults = { expire_in: 'days', path: '/' };
            if (options !== undefined) $.extend(true, defaults, options);
            if (expire !== undefined && expire !== null) {
                if (defaults.expire_in == 'days') d.setDate(d.getDate() + expire);
                else if (defaults.expire_in == 'minutes') d.setTime(d.getTime() + (expire * 60 * 1000));
                else {
                    console.log('expire_in configuration is not valid');
                }
                expires = "expires=" + d.toGMTString();
            }
            else expires = expires = "";
            document.cookie = name + "=" + value + "; " + expires + '; path=' + defaults.path;
            return true;
        }

    }
StartTimer: function(){
  ...
}
};

</script>

nothing happens:neutral_face:

i just sucks wen it comes to javascript like really bad

Hi,

I’m sorry, I don’t have the time to write this for you.

You need to complete this function:

StartTimer: function(){
  ...
}

I’ve given you the pieces. If you can’t even attempt to put them together, I cannot help any more.

2 Likes

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top:0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>
1 Like

thanks but not what i want actually

Why not? It more or less does what you stated in post#1:

You have to help us to help you.

thanks pullo the javascript works like this, on button click it disables until it reaches it count down then it enables, i just want the user to see the countdown while its disable so they what time to check back.

hope u understand now, thanks.

hi sorry for late reply travelled b4 i still cant get it to work ohhhhhhh