CODEWITHSUNDEEP
javascriptjqueryhttp-redirectcountdown
Sangsom
Sangsom

Reputation: 257

JS countdown doesn't work on button click

I have a problem implementing JS redirect countdown... Here you can see button html, when I click on it it should start redirect countdown:

<footer>
    <button type="submit" class="btn btn-primary">
        <i class="fa fa-refresh"></i> Reset Password
    </button>
</footer>

And here is js:

$("button").click(function() {
    var count = 3;
    var countdown = setInterval(function(){
    $("#redirect").text(count);
        if (count == 0) {
            clearInterval(countdown);
            window.open('index.php', "_self");

        }
    count--;
    }, 1000);
});

The problem is that when I'm clicking on button it doesn't do anything not counting not redirecting.. If I move script out of button click event then it works properly.. What am I missing and doesn't understand here?

Thanks..

Upvotes: 0

Views: 335

Answers (1)

devnull69
devnull69

Reputation: 16544

Your button is a submit button, i.e. it will submit the current form and will definitely refresh the page, which will result in your script being terminated.

You should add e.preventDefault() if you want to avoid the default behavior of the submit button

$("button").click(function(e) {
    var count = 3;
    var $that = $(this);
    var countdown = setInterval(function(){
        $("#redirect").text(count);
        if (count == 0) {
            clearInterval(countdown);

            window.open('index.php', "_self");

            // submit now
            $that.closest('form').submit();
        }
        count--;
    }, 1000);
    e.preventDefault();
});

Upvotes: 3

Related Questions