You are viewing limited content. For full access, please sign in.

Question

Question

Hide html after exiting field

asked on August 9

I have an html field that is used just to show an example while someone is clicked into a specific field.

I would like that example (ID #q112) to disappear after they exit the field.

Can this be done using JavaScript?

0 0

Answer

SELECTED ANSWER
replied on August 10

Try the following updated code. Just go into "field #97" and add the custom CSS class "triggerField" or replace '.triggerField input' with '#Field97'

I usually prefer to go the custom class route because it makes it easier to see what everything is doing when you look back at it later or if someone else has to maintain the form in the future.

For example, I would add a class called "hideMe" to the #q112 element, and then replace '#q112' with '.hideMe' or something along those lines.

$(document).ready(function(){
  //If you want it to start out hidden
  $('#q112').hide();
  
  $('.triggerField input').focus(function(){
       $('#q112').show();
  });

  $('.triggerField input').blur(function(){
       $('#q112').hide();
  });
});

 

0 0

Replies

replied on August 9

Actually, it would be even better if the script could make it appear when the person clicks into the field and disappear when they exit.

0 0
replied on August 9

You could try attaching the Show/Hide function to the .focus() and .blur() events respectively

 

for example,

$('.triggerField').focus(function(){
     $('#q112').show();
});

$('.triggerField').blur(function(){
     $('#q112').hide();
});

 

1 0
replied on August 10

Thanks, Jason.  I copied that in exactly as you have it and it's not working.  Not sure why; it looks perfect!

I tried removing any other reference to that field anywhere else, including removing anything else I had tried, like putting hidden in the Advanced Tab class, and removing the rule to hide the field until there was something entered in the field above it.

What else might be stopping this script from working?

0 0
replied on August 10

Oh!  I just realized, that code does not tell it what field I want it to begin this action on.  The field #112 is the one to hide or show, but it is when someone clicks into field #97 that I need it "show" on, and hide after they leave that field.  So, how do we add that in?  (Sorry, I sure wish I could dedicate some training time for JavaScript!!)

0 0
replied on August 10

Hi Connie,

The part where I'm attaching the event handler is just referencing a placeholder, you'll need to adjust it to make sure it attaches to the right element.

0 0
SELECTED ANSWER
replied on August 10

Try the following updated code. Just go into "field #97" and add the custom CSS class "triggerField" or replace '.triggerField input' with '#Field97'

I usually prefer to go the custom class route because it makes it easier to see what everything is doing when you look back at it later or if someone else has to maintain the form in the future.

For example, I would add a class called "hideMe" to the #q112 element, and then replace '#q112' with '.hideMe' or something along those lines.

$(document).ready(function(){
  //If you want it to start out hidden
  $('#q112').hide();
  
  $('.triggerField input').focus(function(){
       $('#q112').show();
  });

  $('.triggerField input').blur(function(){
       $('#q112').hide();
  });
});

 

0 0
replied on August 10

Okay, this worked (see below).  Thanks so much, Jason!!!

$(document).ready(function(){
  //If you want it to start out hidden
  $('.hideMe').hide();
  
  $('#Field97').focus(function(){
       $('.hideMe').show();
  });

  $('#Field97').blur(function(){
       $('.hideMe').hide();
  });
});

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.