Again i need help with this javascript count down button

skyhighweb · March 2, 2018, 5:36pm

everything works fine with the script i just need it to have a visible count down timer when the button is clicked

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

thanks

m_hutley · March 2, 2018, 6:52pm

Your submit function is already changing the button and firing a function 10 seconds after the button is clicked.
Make another change to the button to display the time until unlock.
Fire a second function with a 1 second interval that:
Reads the button’s content
Decreases the number by 1
If it is not at 0, fire the same function 1 second later.

You have all of the tools to do this in your existing code, except the knowledge that a button’s label is determined by its value attribute.

skyhighweb · March 2, 2018, 7:10pm

maybe i have the tools but no knowledge to make it happen thats y this is the 3 rd time am asking bout tis again

m_hutley · March 5, 2018, 1:26pm

Sorry for the delay. Long weekend.

I’d strongly advise you to actually learn what the script does, rather than just blindly walking into a forum and saying ‘someone do this for me’.

Inside Submit:

        setTimeout(function() { Program.EnableSubmit(); }, 10000);

change that to

        this.$target.attr("value","10");
        setTimeout(function() { Program.EnableSubmit(); }, 1000);

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);
},

=>

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

skyhighweb · March 5, 2018, 2:23pm

hello thanks for the assist i added the script but it still not working, when i click the button it shows 0.25 and then NaN after which when the countdown is over its shows the submit button again

Note: the countdown doesnt show any visible countdown just d way it use to countdown, thanks.

And i dont really know much about javascript for real



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

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

m_hutley · March 5, 2018, 2:28pm

Why would you start at 0.25? What’re you trying to count in?

skyhighweb · March 5, 2018, 3:08pm

i have changed i to 10 still d same NAN

m_hutley · March 5, 2018, 3:14pm

this.$target.attr("value",this.$target.value - 1);

=>
this.$target.attr("value",this.$target.attr("value") - 1);

without knowing what other scripts youve got loaded, i’m assuming calling .attr() works in the jquery style (if value not specified, return value)

skyhighweb · March 5, 2018, 3:47pm

thanks alot i added the new codes works fine except now if i refresh the page the count down disappears and NaN shows till d count down is over

<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");
        this.$target.attr("value","Submit");
        return;
    }
    this.$target.attr("value",this.$target.attr("value") - 1);
    setTimeout(function() { Program.EnableSubmit(); }, 1000);
},

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

    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>

sorry for the stress hutley

m_hutley · March 5, 2018, 4:38pm

o…kay… i’ll say that’s an interesting edge case, because most people dont refresh during a countdown, but…

this.$target.attr("value",this.$target.attr("value") - 1)

=>

this.$target.attr("value",Math.floor((value-now)/1000) - 1)

skyhighweb · March 5, 2018, 5:04pm

okay now d count down stays thanks but when i click the button the countdown jumps from 10 to 7 and continues

m_hutley · March 5, 2018, 6:35pm

Hrm. Well the code should build a 10 second cookie value. That’s odd, but since we’re calculating the value from the time in the function now, you can remove these lines:

    this.$target.attr("value","10");
    setTimeout(function() { Program.EnableSubmit(); }, 1000);

and call this line immediately instead:

    Program.EnableSubmit();

skyhighweb · March 5, 2018, 7:03pm

hi u been quite help hutley thanks alot but now when it gets to zero its add -number to complete the countdown.

this in seconds is 13 seconds

               this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });

the coundown starts from 10 and ends in -3 before the button shows up again

full code

<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");
        this.$target.attr("value","Submit");
        return;
    }
    this.$target.attr("value",Math.floor((value-now)/1000) + 1);
    setTimeout(function() { Program.EnableSubmit(); }, 1000);
},

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

    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>

sorry for the stress

m_hutley · March 5, 2018, 8:14pm

Not really stress. The problem lies in this:

this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });

This says “set a value to 10 seconds from now, and expire the cookie in 15 seconds” (0.25 of a minute)

The function then says

var value = this.Cookies.Get('submit_button');
var now = Date.now();
if( !value ) {

that last line waits for value to not exist - in other words, its waiting for the cookie to disappear (15 seconds).
I think that function should actually be checking:

if (value - now <= 0) {

m_hutley · March 5, 2018, 8:19pm

Actually, on second thought, it should check BOTH as a failsafe.

if (!value || value - now <= 0) {

skyhighweb · March 5, 2018, 8:39pm

okay cool added it it now stops at 1 and shows button nice
but this.Cookies.Set('submit_button', Date.now() + 10000, 0.25, { expire_in: 'minutes' });

increasing the time now makes no difference its keep start from 11 or 10 and ends in 1 if i change 0.25 to a higher number it still start at 11 no sure why this.

m_hutley · March 5, 2018, 9:10pm

Because the value shown on the button doesnt rely on the 0.25, it relies on the 10000 (milliseconds).

If you want a higher amount of time, raise the 10000 to whatever time you want in milliseconds (though keep in mind the button will count in seconds, rounding), and raise the 0.25 so that it is more than that amount of time.

So for example, if i wanted the button to count from 60, i would change the 10000 to 60000 (60 seconds), and the 0.25 to 1 (maybe slightly higher, like 1.1)

skyhighweb · March 5, 2018, 9:34pm

o yh thats right thanks alot hutley u been a great help thank u

skyhighweb · March 6, 2018, 9:00am

hi its working now but i got one last issue i didnt plan for not until i submitted the form.
will it b possible to make the button not start to count if the form wasnt summited like it came back as an error the button will retain it submit but if it the form submitted the countdown begins, i know i know am asking a lot am sorry. and thank you.

full code now

<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 || value - now <= 0) {
        this.$target.removeAttr("disabled");
        this.$target.attr("value","Submit");
        return;
    }
    this.$target.attr("value",Math.floor((value-now)/1000) + 1);
    setTimeout(function() { Program.EnableSubmit(); }, 1000);
},

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

    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>

m_hutley · March 6, 2018, 12:35pm

You would put validation for the form in the Submit function, and it simply wouldnt start counting down at all.

Submit: function(){
        //Check for problems here.
       //if (there was a problem) { DoSomethingToShowProblem(); return; }
        this.$target.attr("disabled", true);
        this.Cookies.Set('submit_button', Date.now()+ 10000 + 10000 , { expire_in: 'minutes' });
        Program.EnableSubmit();
    },