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?
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?
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(); }); });
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.
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(); });
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?
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!!)
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.
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(); }); });
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();
});
});