how to use jquery to change background color of textbox for 3 seconds?

Question

I'm doing a textbox and if the requirements does not meet then the background will change to yellow but I only want the background to stay yellow for 3 seconds....how can I do that?

This is what I have at the moment but the yellow bg stays...

$("#form").on("submit",function(){


user = $("#username").val().length;
userErrorBg = $('#username').css('background','yellow');


if(user < 3 || user > 6)
{

    setInterval("userErrorBg",0);

}

})

I'm thinking of putting a clearInterval somewhere but I will need a time count right?

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

Better to use setTimeout(function(){},time) if you suppose it to work only once in a specific time period instead of setInterval(function(){}, time) which repeats the function after a specific time period given.

Try this:

$("#form").on("submit", function () {
    user = $("#username").val().length;
    if (user < 3 || user > 6) {
       $('#username').css('background', 'yellow'); //<---need to put it here
       setTimeout(function () {
           $('#username').css('background', 'white').focus(); //<--add focus too
       }, 3000);
       return false;
    } 
});

CHECKOUT THE DEMO FIDDLE

This POST could help you.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 28 '13 at 05:50

Jai

74,255
12
74
103

Hey have you found some issue here. – Jai Mar 28 '13 at 05:59
haha ya...I realized it's weird why my userErrorBg isn't inside the if statement and it'll still have yellow background too.... – Dora Mar 28 '13 at 06:01
and so now even if the user is within 3-6 characters the bg will still turn yellow...which really doesn't matter because after submitting the page will load to other pages too but I'm just curious and thinking about it before asking again:P – Dora Mar 28 '13 at 06:04
@user1850712 Oh yes great catch but i fixed it and you can take out the fiddle link too. – Jai Mar 28 '13 at 06:10
but I'm really curious why would it run if I put it outside if statement and it's being set as a variable after submit...instead of telling it to run it on submit... – Dora Mar 28 '13 at 06:27
or if I want to make it a variable I should put it outside the sumbit function? – Dora Mar 28 '13 at 06:28
Well i think javascript functions runs even they are set in the variables because they are complete function not a string or obj (i guess). – Jai Mar 28 '13 at 06:31
No that won't work either. better to put it at correct place. – Jai Mar 28 '13 at 06:33
so I guess setting it into var. wouldn't help much :P if I'm only using it once or twice – Dora Mar 28 '13 at 06:33
I just tried putting it outside the submit function and the bg just changes to yellow automatically when I load the page :P – Dora Mar 28 '13 at 06:34
i guess yes! you can store an object or arrays of object in. – Jai Mar 28 '13 at 06:35
yeah that is because of a complete function of css applied and fired at page load event. – Jai Mar 28 '13 at 06:36

Adil · Answer 2 · 2013-03-28T05:36:02.273

2

You should try using setTimout() instead of setInterval(). The setTimeout is fired once and does not repeat it self and you wont need to clear interval as you have to for setInterval.

setTimout(function(){
    $('#username').css('background','white');
},3000);

edited Mar 28 '13 at 05:36

answered Mar 28 '13 at 05:21

Adil

146,340
25
209
204

I did try setTimeout but the bg just stays instead of gone after 3000 – Dora Mar 28 '13 at 05:32
You have to reset it in setTimeout function, I have updated my answer. – Adil Mar 28 '13 at 05:37

Prateek Shukla · Answer 3 · 2013-03-28T05:54:20.447

0

$("#form").on("submit",function(){

try this-

user = $("#username").val().length;
userErrorBg = $('#username').css('background','yellow').delay(3000).css('background','white');


if(user < 3 || user > 6)
{

    setInterval("userErrorBg",0);

}

})

edited Mar 28 '13 at 05:54

answered Mar 28 '13 at 05:25

Prateek Shukla

593
2
7
27

score 0 · Answer 4 · answered Mar 28 '13 at 05:51

try this..

$("#form").on("submit",function(){


user = $("#username").val().length; 


if(user < 3 || user > 6)
{

    setTimeout(function(){
        $('#username').css('background','yellow');
    },0);

    setTimeout(function(){
        $('#username').css('background','white');
    },3000);
}

});

how to use jquery to change background color of textbox for 3 seconds?

4 Answers4

CHECKOUT THE DEMO FIDDLE

This POST could help you.