CAE5942
asked on
Clear input values in a form
Hi everyone,
I have a form with some input text fields (see code view below). I've entered some text in the value attribute, eg.
value="Enter your full name"
But I want this text as well as the text in the second email field to disappear when the user clicks in it. I have the following code, however it doesn't seem to work:
<script type="text/javascript">
//<![CDATA[
var inp = document.getElementById('f ullname');
inp.onfocus = function()
{
if (inp.value == 'Enter your full name')
{
inp.value = '';
}
};
//]]>
</script>
I wondered if someone could tell me where I'm going wrong?
Appreciate any assistance.
I have a form with some input text fields (see code view below). I've entered some text in the value attribute, eg.
value="Enter your full name"
But I want this text as well as the text in the second email field to disappear when the user clicks in it. I have the following code, however it doesn't seem to work:
<script type="text/javascript">
//<![CDATA[
var inp = document.getElementById('f
inp.onfocus = function()
{
if (inp.value == 'Enter your full name')
{
inp.value = '';
}
};
//]]>
</script>
I wondered if someone could tell me where I'm going wrong?
Appreciate any assistance.
<div>
<form action="" method="post" id="newsletter">
<fieldset>
<div>
<label for="fullname">Full Name:</label>
<input id="fullname" name="firstname" type="text" value="Enter your full name" />
</div>
<div>
<label for="email">Email:</label>
<input id="email" name="email" type="text" value="Email address" />
</div>
<div id="submit_button">
<input type="submit" class="submit" value="Subscribe" />
</div>
</fieldset>
</form>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oops... no checks on values of each input...
Use the following script...
Use the following script...
<script type="text/javascript">
$(function() {
$("#fullname, #email").focus(function() {
var $fullname = $("#fullname");
var $email = $("#email");
if ($email.val() == "Email address")
$email.val("");
if ($fullname.val() == "Enter your full name")
$fullname.val("");
});
});
</script>
ASKER
Thanks for the replies,
I've just tried your code, ie:
<script type="text/javascript">
$(function() {
$("#fullname, #email").focus(function() {
var $fullname = $("#fullname");
var $email = $("#email");
if ($email.val() == "Email address")
$email.val("");
if ($fullname.val() == "Enter your full name")
$fullname.val("");
});
});
</script>
My form code remains the same as in the original post above but after testing it still doesn't work. I click in the field and the text doesn't disappear.
Any ideas what might be happening?
I've just tried your code, ie:
<script type="text/javascript">
$(function() {
$("#fullname, #email").focus(function() {
var $fullname = $("#fullname");
var $email = $("#email");
if ($email.val() == "Email address")
$email.val("");
if ($fullname.val() == "Enter your full name")
$fullname.val("");
});
});
</script>
My form code remains the same as in the original post above but after testing it still doesn't work. I click in the field and the text doesn't disappear.
Any ideas what might be happening?
Did you include script reference for jquery?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ASKER
I've put that in now and it works however when you click in the first field both of the fields are cleared at the same time. Is it possible to clear one at a time?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Have you tried my comment #28435870.
It has simple onfocus and onfocusout event for textbox. No javascript. No jquery.
It has simple onfocus and onfocusout event for textbox. No javascript. No jquery.
Try this following
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function function1()
{
var inp = document.getElementById('f ullname');
if (inp.value == 'Enter your full name')
{
inp.value = '';
}
};
</script>
</HEAD>
<BODY>
<div>
<form action="" method="post" id="newsletter">
<fieldset>
<div>
<label for="fullname">Full Name:</label>
<input id="fullname" name="firstname" type="text" onfocus="function1()" value="Enter your full name" />
</div>
<div>
<label for="email">Email:</label>
<input id="email" name="email" type="text" value="Email address" />
</div>
<div id="submit_button">
<input type="submit" class="submit" value="Subscribe" />
</div>
</fieldset>
</form>
</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function function1()
{
var inp = document.getElementById('f
if (inp.value == 'Enter your full name')
{
inp.value = '';
}
};
</script>
</HEAD>
<BODY>
<div>
<form action="" method="post" id="newsletter">
<fieldset>
<div>
<label for="fullname">Full Name:</label>
<input id="fullname" name="firstname" type="text" onfocus="function1()" value="Enter your full name" />
</div>
<div>
<label for="email">Email:</label>
<input id="email" name="email" type="text" value="Email address" />
</div>
<div id="submit_button">
<input type="submit" class="submit" value="Subscribe" />
</div>
</fieldset>
</form>
</div>
</BODY>
</HTML>
ASKER
I've tried both solutions offered and they both work great. I'll split the points. Thanks for the help.
ASKER
Sorry to come back to this guys. I really like the simplicity of the code given by rajapandian_81.
When the user clicks in the field the text disappears but if they don't type anything and the focus is off the field again, the original text doesn't return. Is it possible for this to happen?
When the user clicks in the field the text disappears but if they don't type anything and the focus is off the field again, the original text doesn't return. Is it possible for this to happen?
use onblur instead of onfocusout
ASKER
That's perfect. Thanks again
Binds focus event to all of input elements with type = text in the form newsletter and clears all of them
Open in new window