clearing form textboxes when clicked...

SooTyLaD

SooTyLaD

SooTyLaD

Soldato
Joined
19 Oct 2002
Posts
3,480
hi guys,

you know that very common feature of a form where when you click it, the text disappears for you to type?

well i figured that this does the job...

onclick="this.value=''"

in the input tag, but how to you get the test to revert back to how it was if you click off again?

a good example is here: http://www.vidahost.com/index.php if you click the email address bit of the client login at the right... can't see the bit in the code that snaps it back...

any ideas?
 
ahh i see... well i havn't been able to achieve the effect i was after so i attempted to write my own bit of JS, but there is something basic wrong with it but i'm not good enough to spot it, could someone cast their eyes over this?

Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus=textClear('Your Name') onBlur=textRefill('Your Name') />

Code: 
<script language=JavaScript>
<!-- 
function textClear(content)
{
if (document.brochureRequest.from.value == content)
document.brochureRequest.from.value = "";
} 

function textRefill(content)
{
	if (document.brochureRequest.from.value == "")
	  document.brochureRequest.from.value = content;
}
-->
</script>

what i want to happen is:

• if you click the text box which conatains "Your Name" - it will clear it for you.
• if you then dont enter anything and click away, if will return to "Your Name"
• if you have entered somthing different, if will not be deleted or replaced regardless of what you do.

this code worked when i didn't use a variable, so it looked like this:

Code: 
function textClear()
{
if (document.brochureRequest.from.value == "Your Name")
document.brochureRequest.from.value = "";
}

but this would require multiple bits of JS for every textbox, this new way of thinking just means you can do the work from the html and leave the JS alone, nice idea but something if fundamentlaly wrong with my syntax i'm guessing, any ideas?
 
superb :)

as an extension to that... you'll notice i have used document.brochureRequest.from

just realised this wont work for other ones as it wont be "from" anymore, and it wont work with another form either cuz this is only for "brochureRequest"

is there anyway to make it work regardless of the form and texbox names? summat like documet.thisform.thistextbox.value or summat like that?

EDIT: dont think i've explained this very well...

i mean i just want to avoid having the JS look like this:

Code: 
function textClear(content)
{

if (document.brochureRequest.from.value == content)
document.brochureRequest.from.value = "";

if (document.brochureRequest.email.value == content)
document.brochureRequest.email.value = "";

if (document.brochureRequest.message.value == content)
document.brochureRequest.message.value = "";

}

see what i mean?
 
Last edited:
i thought of a way to make the script more globally useable, but once again i've hit a snag...

Code: 
<input type="text" name="from" id="from" value="Your Name" onFocus="textClear('from','Your Name')" onBlur="textRefill('from','Your Name')" />

Code: 
function textClear(field,content)
{
  if (document.brochureRequest.field.value == content) document.brochureRequest.field.value = "";
} 

function textRefill(field,content)
{
	if (document.brochureRequest.field.value == "") document.brochureRequest.field.value = content;
}

this way (although i cant seem to just simply make it work regardless of form name (document.form. etc didn't work)) i should be able to pass it the field and content and it should work regardless of which text box it came from, but i dont think it likes me using the "field" string as part of the document.brochureRequest.[thisbit].value part...

any ideas?

also, will this ever work on textarea bits since they dont use "value"?
 
You must log in or register to reply here.
Back
Top Bottom