[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

JavaScript - clear default value of input form field

Posted on 2011-02-15
5
Medium Priority
?
763 Views
Last Modified: 2012-05-11
Hi,
is there a way of automatically clearing "Find Products" when a user click in the box??

Thanks..

<html>
<head>
</head>
<body>
<form name="search" method="POST" action="search.php">
                    <input name="Submit" type="submit" id="Submit" value="Go" />
                    <input name="keywords" type="integer" class="searchinputbox" id="keywords" value="Find Products" size="15">&nbsp;&nbsp;&nbsp;
</form>
</body>
</html>
0
Comment
Question by:sabecs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 25

Expert Comment

by:Lee Savidge
ID: 34895684
Change this:

<input name="keywords" type="integer" class="searchinputbox" id="keywords" value="Find Products" size="15">&nbsp;&nbsp;&nbsp;

to

<input name="keywords" type="integer" class="searchinputbox" id="keywords" value="Find Products" size="15" onclick="javascript:this.value="";">&nbsp;&nbsp;&nbsp;

This doesn't cater for uses tabbing into the box though.

Lee

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34895689
<input name="keywords" type="integer" class="searchinputbox" id="keywords" value="Find Products" size="15" onclick="clearField(this)" onfocus="clearField(this)">

<script>
  function clearField(this)
  {
      if (this.value == "Find Products")
      {
          this.value = "";
      }
  }
</script>


or you can simply try placeholder

<input name="keywords" type="integer" class="searchinputbox" id="keywords" placeholder="Find Products" size="15" onclick="" onfocus="">
0
 
LVL 25

Expert Comment

by:Lee Savidge
ID: 34895691
0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 2000 total points
ID: 34895946
just going to add tiny change to gurvinders solution, the use of defaultValue is nicer than having to use the physical string to compare against.
<input name="keywords" type="integer" class="searchinputbox" id="keywords" value="Find Products" size="15" onclick="clearField(this)" onfocus="clearField(this)">
<script type="text/javascript">
  function clearField(x){	  
      if(x.value==x.defaultValue){x.value="";}
  }
</script>

Open in new window

0
 

Author Closing Comment

by:sabecs
ID: 34896153
Thanks, its perfect...
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question