CODEWITHSUNDEEP
jqueryhttp-redirectonclicksubmit
Jeff
Jeff

Reputation: 111

jquery countdowntimer on submit

I wanted to code when visitor click submit, it will show a countdown time before redirect to the said site.

below are the demo

http://jsfiddle.net/VJT9d/17/

this is the html code:

<input id="hulk" class="submit" name="send_contact" type="submit" value="Send" />

<div style="display:hidden">Redirecting In <span id="countdown">5</span>.</div>

and the jquery code:

var timer = 5,
el = document.getElementById('countdown');

$('#hulk').click(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
    setTimeout(function () {
        t_minus();
    }, 1000);
} else {
    window.location.replace("/");
}
}());

how to make the countdown timer only appear after click submit?

Upvotes: 0

Views: 444

Answers (3)

Marek Kowalczyk
Marek Kowalczyk

Reputation: 26

to make the message visible only after a click you need 2 things: first, properly hide element with proper style, secondly do not launch the t_minus function in the last line!

solution

var timer = 5,

el = document.getElementById('countdown');
$('#hulk').click(function t_minus() {
'use strict';
el.innerHTML = timer--;
if (timer >= 0) {
    setTimeout(function () {
    t_minus();
    }, 1000);
} else {
    window.location.replace("/");
}
});

please read also how to hide the elements using CSS

Upvotes: 0

Deepak
Deepak

Reputation: 327

Use

$('#countdown').show()

inside the click function.

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80639

Just remove the () you have at the end.

var timer = 5,
    el = document.getElementById('countdown');

$('#hulk').on( 'click', function t_minus() {
    'use strict';
    el.innerHTML = timer--;
    if (timer >= 0) {
        setTimeout(function () {
            t_minus();
        }, 1000);
    } else {
        window.location.replace("/");
    }
});

updated fiddle.

Upvotes: 2

Related Questions