The problem is, lets assumed the user typed a user name in the field but forgot to add a character and decides to add that character, the value they entered previously gets deleted. This can be frustrating. But I am only using it for two fields not an entire form.
Is there a way to make the initial value delete on the first click in the text field but then whatever the user typed remains until the form is either submitted or the browser is refreshed or clear?
Have no default value, and if the user has Javascript enabled, then have the script add in the value “Set your username” just once. onblur, when the focus is set on the input, and the value’s gone, and let this only happen once per page load.
That way those of us who don’t have JS don’t need to keep deleting your value before typing in what we want, and those with JS only need to set focus there with a click and the input remains empty for the rest of the time the page is there.
I guess it’s not too hard to double click the default text and delete if you don’t have JavaScript enabled.
With that in mind, here is a nice script courtesy of Jeremy Keith (from DOM Scripting) that allows for the behavior requested by the OP and more (this can be placed in the head section, or in a separate .js file):
function resetFields(whichform) {
for (var i=0; i<whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.type == "submit") continue;
if (!element.defaultValue) continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
window.onload = prepareForms;
function prepareForms() {
for (var i=0; i<document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
}
}
This solution is nice in that no JS needs to be placed in the form HTML at all (or on the entire page, for that matter, if you link to an external .js file).
All you need in the HTML is to make sure that a value is set:
Possibly, but for accessibility and usability reasons I almost never put values in inputs. Instead I have value=“” in the code (which should only be required for radios and checkboxes (with real non-zero values) but I started adding them in everything for my colleague’s back-end scripts).
I wouldn’t want someone who accidentally skipped something to be submitting some value that isn’t true, and not everyone has ease in deleting text before writing in text.
@Stomme poes Strangely, the use of the default values is said to be for the sake of accessibility. As least once upon a time, I’ve read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.
Indeed, that’s its virtue.
Is whichform the name of my form? …should this be replace by the ID of my form or the form name?
No; no change to your form needs to be made at all. The script just runs through any form on the page.
As least once upon a time, I’ve read that browsers had trouble recognizing empty form fields, making keyboard navigation difficult, as you could not tab to empty fields.
That’s certainly possible, I haven’t tabbed through forms in many older browsers. Nothing older than IE5.5 or Opera 9x at least.
Hello, i have taken out this code from this thread and it does what it’s supposed to and it even does more, and that more is not what i wanted
function resetFields(whichform) {
for (var i=0; i<whichform.elements.length; i++) {
var element = whichform.elements[i];
if (element.type == "submit") continue;
if (!element.defaultValue) continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
window.onload = prepareForms;
function prepareForms() {
for (var i=0; i<document.forms.length; i++) {
var thisform = document.forms[i];
resetFields(thisform);
}
}
well, what happens is that when i submit the form to send it unchecks the chekboxes, and not being myself javascript savvy i’m a little lost on how to keep the checkboxes selected when sending.
The checkboxes default value is unchecked, so i would suppose that when people check them they would stay that way, but no, in fact it clears them and no data is passed.
If anybody can help me with this i will really appreciate it,
@Stomme poes I don’t know if this still applies, but at some time some user agents had problems with empty form controls.
Sorry Ralph, I dunno where my brain was… but this is one of those things I remember, that WCAG2 has dropped this requirement (along with some other things).
psykick what are you using the JS for? If it’s as simple as what iconic was asking for (that UserName or something sits be default in the text input) I wouldn’t use all that at all, just a simple js:
<script type="text/javascript">
var searchLabel = document.forms["formSearch"]["search"];
searchLabel.value = "typ uw trefwoorden in";
searchLabel.onfocus = function() {
searchLabel.select(); //highlights on focus
//or this.value=''; removes value on focus
}
</script>
where the input has an id of “search” in the form with the id of “formSearch”.
otherwise, with the current JS you have, I wonder if this line:
if (element.type == “submit”) continue;
could also have more if’s: if (element.type == “checkbox”) continue; or something.
i am using it to a clear default values in a contact form of a website.
is it possible that you don’t need/want default values? Are these helping people know what kind of info you are looking for, or are they what people are expected to want to check (so those who want defaults have to change as little as possible)? Or are you re-enactive an
input type=“reset” button? I know, I know, people say they are worthless but I appreciate them when I’m refilling in forms with whole new values.
Watch out, I’m also a JS dummy, and likely a more elegant or just plain better way is out there.
Thanks again for the fast answer and Gelukkig nieuwjaar
that if statement did the trick perfectly. exactly what i needed, and i doubt someone could write that better than you did
i could just insert the name of the boxes of the contact form above them but i was getting stuborn to have the names of the boxes inside them
also before you replied i found a way around the problem, that was, having the checkboxes checked by default and ppl would just need to uncheck them, and it also worked, but i like the script change more than having checkboxes checked by default.
if you want you can have a look at the contact form here
