Jquery Script

[makethatgreen]

I'm looking for a jquery script that would disable a 'continue' button for a certain amount of time, then after (10 seconds) allow the button to be clicked.

Does anyone know of a script similar to this?

Boobz:

 

[Skittled]

Why worry about jquery if pure js would be simple enough?


<input id="btnContinue" type="submit">

<script>
document.getElementById('btnContinue').disabled = true;
setTimeout("document.getElementById('btnContinue').disabled=false;",10*1000);
</script>

 

[strictnein]

Sorry, I'm too tired to write code:
Use jQuery timer plugin:
Plugins | jQuery Plugins

 

[makethatgreen]

Thanks guys

 

[ii silver ii]

If your page already uses jQuery then it's very simple:

$("#formId :input").attr("disabled", true).delay(1000).attr("disabled", false);

Delay can be fiddly sometimes which is why the show code is before it.

.delay() – jQuery API

Nice second image!

 

[makethatgreen]

^ Thanks! I'm horrible when it comes to code. + Rep

 

[Rexibit]

Why worry about jquery if pure js would be simple enough?

jQUERY tends to be much more efficient and less prone to code injection, especially when using AJAX.

...disable a 'continue' button for a certain amount of time...

I'm not sure that having a timer for this is the best course of action. I assume that you want a visitor to fill in a specific form after they are done reading a page, and don't want them to immediately go to the next section.

In this case, they could be in another window while your page is loading and come back 5 minutes later and just as easily move on. Or, they could leave out your critical fields and move on.

I think you'd be better only showing the continue button once a field in the form has some value in it. That way it doesn't matter about how long someone is on the page.

Here's some sample code on how to achieve this with a textbox named "email" and a button named "continue".

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("input[name=continue]").attr("disabled", true);
    $("input[name=email]").keyup(function(event){
        $("input[name=continue]").attr("disabled", false);
    });
});
</script>

 

[Skittled]

jQUERY tends to be much more efficient and less prone to code injection, especially when using AJAX.

Doesn't look much more efficient in this case (if we're talking about code length. no idea about processing time). Point taken for re ajax/injection/etc though - they're problems for more complex situations, but they wouldn't be a problem in this case. Or am I missing something?