Hi, I have a form with a name and an email address. I want a simple icon to appear to the right of the form if the user types anything in the field, even one character. If there is anything present in the field, I want the success icon to appear. If the user advances to the next field with no input, I want the fail icon to appear. Does anyone know some super simple javascript to do this? Everything Im finding is way too advanced and too feature rich.
+3
A:
How about:
var field = document.getElementById('myFormField');
var icon = document.getElementById('myIcon');
field.onchange = function(){
icon.src = this.value ? 'success.png' : 'fail.png';
};
(I haven't yet tested this)
Basically, it says: whenever the text field is changed by the user, check to see the value of the field. If the field has not been filled in, then the value will be false. The src property of the icon is then changed accordingly.
For other types of form field (e.g. selects), you may need a different property than value. But if you're using jQuery, you can simply use .val().
You might want to add a more sophisticated check - e.g. if the value contains only whitespace.
Premasagar
2009-10-24 22:34:02
i am using jquery and i also tried this and i couldnt get it to work. Can you write some basic html to go along with this so I can see how it works? SHould I add a form id and call it myFormField? And then what do I do in the html for myIcon? Im a bit confused, can you jsut break it down a bit more for me? THanks
JCHASE11
2009-10-24 23:06:57
I was thinking you had something like this (this is just a stripped down version - you may have more attributes and details in your HTML): `<form><input type="text" id="myFormField" /><img id="myIcon" /></form>`. You may want to add the icon via JavaScript, since you don't need it to display anything before the user interacts with the form, and because you won't need the icon if the browser doesn't use JavaScript.
Premasagar
2009-10-24 23:18:21
Was that snippet of HTML useful? If you're still having problems, feel free to post a stripped down section of your code, and we can see how to get it all functioning.
Premasagar
2009-10-26 21:51:58
that worked great, thanks so much!
JCHASE11
2009-12-06 17:27:42
+1
A:
1) First off, install jquery and include it on your site. Minified it's tiny, and it allows for much easier javascript.
2) My assumed html is:
<input type="text" name="name" id="edit-name" class='text-field' />
<img src='something' id='edit-name-succeed' style="display: none;" />
<img src='something' id='edit-name-fail' style="display: none;" />
<input type="text" name="email" id="edit-email' class='text-field' />
<img src='something' id='edit-email-succeed' style="display: none;" />
<img src='something' id='edit-email-fail' style="display: none;" />
3) My javascript would then be:
$('input.text-field').change(function() {
if ($(this).text()) {
$('#' + $(this).attr('id') + '-fail').hide();
$('#' + $(this).attr('id') + '-succeed').show();
}
});
$('input.text-field').blur(function() {
if (!($(this).text())) {
$('#' + $(this).attr('id') + '-fail').show();
$('#' + $(this).attr('id') + '-succeed').hide();
}
});
John Fiala
2009-10-24 22:41:02
I tried this and wasnt working. I cant seem to put my code here for you to see, but in the javascript all i change is the id? Where does that pertain to on the html?
JCHASE11
2009-10-24 23:01:46