How to add countdown timer to button


#1

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>

#2

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:


#3

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


#4

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.


#5

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(){
    ...
  }
};

#6

or both


#7

Both :slight_smile:

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


#8

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


#9

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.


#10

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>

#11

Hi,

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

StartTimer: function(){
  ...
}

#12

<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>

#13

nothing happens:neutral_face:


#14

i just sucks wen it comes to javascript like really bad


#15

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.


#16

<!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>

#17

thanks but not what i want actually


#18

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

You have to help us to help you.


#19

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.


#20

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