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

LVL 1
gwh2Asked:
Who is Participating?
 
rajapandian_81Connect With a Mentor Commented:
try below code


<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" onfocus="if (this.value == 'Enter your full name') this.value=''" onfocusout="if (this.value == '') this.value='Enter your full name'" /> 
    </div> 
    <div> 
      <label for="email">Email:</label> 
        <input id="email" name="email" type="text" value="Email address" onfocus="if (this.value == 'Email address') this.value=''" onfocusout="if (this.value == '') this.value='Email address'" /> 
    </div> 
    <div id="submit_button"> 
      <input type="submit" class="submit" value="Subscribe" /> 
      </div> 
 </fieldset> 
</form> 
</div>

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
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

0
 
Albert Van HalenAnalyst developerCommented:
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

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
gwh2Author Commented:
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?
0
 
Albert Van HalenAnalyst developerCommented:
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

0
 
gwh2Author Commented:
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?
0
 
Albert Van HalenConnect With a Mentor Analyst developerCommented:
Ok assuming you wanted to clear all fields : sorry.
Use this

Perhaps it's an idea to have a look at watermark plugins.
http://digitalbush.com/projects/watermark-input-plugin/
$(function() {
	$("#newsletter input:text").focus(function() {
		switch(this.id) {
			case "fullname":
				if($(this).val() == "Enter your full name")
					$(this).val("");
				break;
			case "email":
				if($(this).val() == "Email address")
					$(this).val("");
				break;
		}
	});
});

Open in new window

0
 
rajapandian_81Commented:
Have you tried my comment #28435870.

It has simple onfocus and onfocusout event for textbox. No javascript. No jquery.
0
 
saravanakgCommented:
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>
0
 
gwh2Author Commented:
I've tried both solutions offered and they both work great. I'll split the points. Thanks for the help.
0
 
gwh2Author Commented:
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?
0
 
Albert Van HalenAnalyst developerCommented:
use onblur instead of onfocusout
0
 
gwh2Author Commented:
That's perfect. Thanks again
0
All Courses

From novice to tech pro — start learning today.