Delay function on form field change

Question

I'm having trouble with a relatively simple piece of code here. I'm trying to delay removeAttr for 5 seconds after a checkbox is clicked, using change().

I can get the removeAttr to work instantly on change, or the setTimeout to work on page load, but not in combination of the two.

<input type="checkbox" id="human"> I am a human
<input type="file" disabled name="file" id="file" />  

$('document').ready(function(){

    $('#human').change(

    setTimeout(function(){
    $('#file').removeAttr("disabled");
    }, 5000));

    });

Here is a complimentary JSFiddle of my issue.

Thanks guys and girls.

Missing name attribute for #human. Extra `)` after 5000, missing `function(){` after `change(` — Ejaz, May 05 '14 at 18:08
shouldn't you be toggling instead of deleting the attribute. What happens when a user selects and then deselects? In that case use @A. Wolff's answer and check if the prop is true and set false. else set true. — theshadowmonkey, May 05 '14 at 18:53
That may be the case for some similar instances. However my primary purpose is to prevent spam bots from uploading stuff in that field. I will think about making it toggle. Could bots check and uncheck? — dcclassics, May 05 '14 at 18:56
So are you basing this implementation on the premise that bots can't wait for 5 seconds? It may be flawed in a longer term. If its some sensitive data, I'd suggest using captchas or some other verification systems. — theshadowmonkey, May 05 '14 at 20:28

milagvoniduak · Accepted Answer · 2014-05-05T18:22:32.480

3

Your javascript does not seem to be right. To achieve this you should handle change function appropriately

$(document).ready(function(){
    $('#human').change(function() {
       setTimeout(function() {
            $('#file').removeAttr("disabled");
        }, 5000);
    })
});

FIDDLE

edited May 05 '14 at 18:22

answered May 05 '14 at 18:10

milagvoniduak

3,214
1
18
18

1

Just one thing `$('document')` will return empty object, even pseudo jQuery ready event handles it, using a promise, it should be bound to `document` object – A. Wolff May 05 '14 at 18:16
I guess I initially had my function to remove the attribute, and thought just sticking setTimeout on the beginning of it would delay it accordingly. – dcclassics May 05 '14 at 18:26

score 1 · Answer 2 · answered May 05 '14 at 18:12

1

You could use delay() by putting relevant code in queue:

{document is an object, not an element type}

$(document).ready(function () {
    $('#human').one('change', function () {
        $('#file').delay(5000).queue(function(){
            $(this).prop('disabled', false);
        });
    });
});

DEMO

answered May 05 '14 at 18:12

A. Wolff

74,033
9
94
155

I tried delay as well, but not with the queue. I did not know about queue. – dcclassics May 05 '14 at 18:14

score 0 · Answer 3 · answered May 05 '14 at 18:18

Maybe I have misunderstood you, but you call setTimeout instead of setting it as the handler. You can e.g. put the code in separate function-handler and set this function as the event handler:

var myFunc = function () {
   setTimeout(function(){
       $('#file').removeAttr("disabled");
   }, 1000);
};

$('document').ready(function(){
    $('#human').change(myFunc);
});

Fiddle

Delay function on form field change

3 Answers3

DEMO