Link to home
Start Free TrialLog in
Avatar of CAE5942
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('fullname');

      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>

Open in new window

Avatar of Albert Van Halen
Albert Van Halen
Flag of Netherlands image

Using jquery use this :
Binds focus event to all of input elements with type = text in the form newsletter and clears all of them
<script type="text/javascript">
$(function() {
    $("#newsletter input:text").focus(function() {
        $("#newsletter input:text").val("");
    });
});
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of rajapandian_81
rajapandian_81
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Oops... no checks on values of each input...
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>

Open in new window

Avatar of CAE5942
CAE5942

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?
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>

Open in new window

Avatar of CAE5942

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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Have you tried my comment #28435870.

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('fullname');
            
            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>
Avatar of CAE5942

ASKER

I've tried both solutions offered and they both work great. I'll split the points. Thanks for the help.
Avatar of CAE5942

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?
use onblur instead of onfocusout
Avatar of CAE5942

ASKER

That's perfect. Thanks again