Removing Text from Field when It's Activated

[etidd]

Hello all,

I am looking to collect email addresses with my site. On my input elements, when the user clicks on it, I want to change the value attribute to blank (make the "your e-mail" disappear when the user clicks on the input element). Is JavaScript used for this?

[webdev1958]

You can put an onclick event handler on the element which is called when the user clicks on the element. The event handler then simply changes the value attribute of the element to null or an empty string. This can all be done using javascript.

[etidd]

Hey, thanks for the post! One more question. Would you recommend putting the script in a separate file, or should I just put it at the bottom of my HTML file?

[paul_wilkins]

Hey, thanks for the post! One more question. Would you recommend putting the script in a separate file, or should I just put it at the bottom of my HTML file?

You should do both.

Put the script in a separate file so that it can be easily edited by you, as well as being easily cached by the browser.
Refer to that script file from the end of your body, just before the </body> tag, so that your script can easily work with content on your page before it has finished loading.

[etidd]

Good suggestion, Paul. I know that I'm gonna be using JS for a little bit more than just this input form function, so I need to start a separate file.

I've been searching the internet for a while now for help on making the correct statement that will change the value of the value attribute. This is the closest guess I have, and it doesn't work.

name = oForm.elements["name"].value;

where

oForm = document.forms[index];

I don't even understand what the 2nd statement means, mainly because of that parameter, [index].
What JS method should I use?
& Where's the JS api library?

[paul_wilkins]

This is the closest guess I have, and it doesn't work.

name = oForm.elements["name"].value;

where

oForm = document.forms[index];

I don't even understand what the 2nd statement means, mainly because of that parameter, [index].
What JS method should I use?

The way that I might do that is with this:

<form id="userDetails">
    <p><label>Name: <input name="name"></label></p>
    ...
</form>

var form = document.getElementById['userDetails'];
var name = form.elements['name'].value;

& Where's the JS api library?

The one that people seem to prefer starting off with is jQuery, but it's not required. If you are learning JavaScript, it's better if you learn what JavaScript can do first, before doing anything with other API's.

[etidd]

I think I have a pretty good image of what JavaScript can do now. It's THE tool for actively updating HTML/CSS code in real-time for a web visitor amongst other things (animation, website layout, etc.).

But I put this into my code:
HTML:

<form id="emailbox" name="form1" method="post" action="">
    	<div>
            <input type="text" name="go" id="go" value="your e-mail" onclick="removeText()"/>
            <input type="submit" value="Join" />
        </div>
    </form>

JS:

function removeText(){
	var form = document.getElementById['emailbox'];
	var name = form.elements['go'].value;	
}

Now that I have a variable, name, for the value of the value attribute, what function can I use to change the value attribute to blank? I'm still having trouble here.

[webdev1958]

it depends on how much other javascript you have for the page.

[felgall]

Give the field an id and reference it using document.getElementById - you need an id to attach the label anyway. The name is for use on the server after the form is submitted.

[etidd]

Well, I got it figured out.

Thanks for all your help, guys.
This is the code I've utilized:

function input_focus(obj){
	if (obj.value=="your e-mail"){
		obj.value=""
	}
}

function input_reset(obj){
	obj.value="your e-mail"}

[Logic Ali]

Well, I got it figured out.

This is the code I've utilized:

function input_focus(obj){
	if (obj.value=="your e-mail"){
		obj.value=""
	}
}

function input_reset(obj){
	obj.value="your e-mail"}

That's what's known as a maintenance nightmare.

function input_focus(obj){
	if ( obj.value == obj.defaultValue ){
		obj.value = ""
	}
}

function input_reset(obj){
	obj.value = obj.defaultValue;
}

[Stomme poes]

Ali is correct if you have more than one or two inputs with these placeholders. You don't want to have to run a function for every separate input with its own default text.