Adding class on text field input

I have a form that’s behind a central login system that I have no control over. The thing times out 15 minutes after the last time you click a submit button, and with the number of questions on this form, there’s no way anyone can finish filling it out in 15 minutes. Some fields require typing 200-250 word comments.

After fiddling around with a few autosave scripts and not having much luck (a huge portion of my users are stuck on various older IEs (6, 7, 8), so I’ve had trouble getting consistent results), I’ve come up with another idea.

I’ve broken the form into sections, and each section has its on submit button. When you click save on that section, the info is saved and you’re scrolled to the next section, and next to the previous section appears a cute little green “saved” icon. This all works really well.

The problem is, if you edit a record, the “saved” icon still remains, and I don’t want someone fooled into thinking those changes are saved when they haven’t clicked “submit”. So I want to use jquery to hide that icon (it has a class) the second someone starts typing.

I think I need to trigger something when that comment field has focus. There are also some drop down <select> elements on the page, so for that I probably need an on change function.

Am I on the right track?

Hi,

To hide an element when an input field receives focus you can do:

<input type="text" id="myInput" placeholder="Type something" />
<img id="myPic" src="http://weknowmemes.com/wp-content/uploads/2011/11/you-got-me-ribbons-omg-lolcat.jpg" />

var inputField = document.getElementById("myInput"),
    picture = document.getElementById("myPic");

inputField.onfocus = function(){
  picture.style.display = "none";
}

inputField.onblur = function(){
  picture.style.display = "block";
}

Demo

Thanks Pullo!

After posting this I of course fiddled with it around at home. I ended up with this, which also works (especially once you figure out that you accidentally neglected to load the JQuery libraries on the page you’re working with):


$(function(){
  $("#crit1_comments").click(function(){
	$("div#crit1saved").addClass("savehide");
  });
});
$(function(){
  $("#crit1_score").change(function(){
	$("div#crit1saved").addClass("savehide");
  });
});
.savehide { display: none; }

I have two because I have both a <select> and a <textarea> for each section. So changing either one results in the icon vanishing. I couldn’t get the change function working with the textarea, so I just made it work with a click. Not ideal, but it works.

Since I have seven sections and the form elements are numbered (crit1 through crit7), I only had to write this code block once, stick it in a loop, and make the number a variable that incremented and let the code write the other 6 for me.

Hi,

Glad you got it working :slight_smile:

Just a small point, but you can turn this:

$(function(){
  $("#crit1_comments").click(function(){
	$("div#crit1saved").addClass("savehide");
  });
});
$(function(){
  $("#crit1_score").change(function(){
	$("div#crit1saved").addClass("savehide");
  });
});

into this:

$(function(){
  $("#crit1_comments").click(function(){
	$("div#crit1saved").addClass("savehide");
  });

  $("#crit1_score").change(function(){
	$("div#crit1saved").addClass("savehide");
  });
});

And if you include your JS at the bottom of your page before the closing body tag, this:

$("#crit1_comments").click(function(){
  $("div#crit1saved").addClass("savehide");
});

$("#crit1_score").change(function(){
  $("div#crit1saved").addClass("savehide");
});

Also, it might be better to name your class “hidden” instead of “savehide”, as this describes what it does a little better.