Avatar of charmingduck
charmingduck asked on

web form jquery

on the form, there's a name filed, a phone field, and a picture, a submit button.

how do i achieve this?

the picture is hidden, only when you focus on either the name field or phone field, the picture slidedown, when it's blur, the picture stay hidden.

The problem with my code is(see attached), when I finish name field and tab to phone field, it will still do the slideup and then slidedown. But what I want is, if the blur doesnt last more than 30 secs, it doesnt do the slideup, how to do this in jquery?  



$("#pic").css('display','none');



$("#name,#phone").focus(function (){
   
    $("#pic").slideDown(600);
                      
});
 
$("#name,#phone").blur(function (){
   
    $("#pic").slideUp(600);
                      
});

Open in new window

JScriptScripting Languages

Avatar of undefined
Last Comment
charmingduck

8/22/2022 - Mon
Samuel Liew

Try this:
$("#pic").css('display','none');

$("#name,#phone").focus(function (){
	clearTimeout(timeout);
	$("#pic").slideDown(600);
});

$("#name,#phone").blur(function (){
	timeout = setTimeout('$("#pic").slideUp(600)', 30000);
});

Open in new window

Samuel Liew

You will also need a global timeout variable outside of the jquery document ready function:

var timeout = null;
ASKER CERTIFIED SOLUTION
Sudaraka Wijesinghe

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
charmingduck

great
Your help has saved me hundreds of hours of internet surfing.
fblack61