Update: In the comments someone noted that this function should really only occur once, the script and demo have been updated with the handy .unclick() to achieve this.

Update2: jQuery creator John Resig has detailed how to reduce and simplify the code for what I intended to do, be sure to check out his comment

Amongst the tidal wave of javascript frameworks, libraries, widgets and kitchen sinks that have come about lately - one in particular has stood out for me: jQuery.

I’ve been looking for a way to make little custom bits of javascript for various things, nothing overly complicated - a show/hide here, a fade/reveal there. If you’re looking for out-of-the-box complicated widgets, you might start elsewhere - or better yet, hire a javascript guru (like we usually do at Twinsparc). For my smaller javascript needs, and my way of thinking, jQuery just makes perfect sense.

In any case, I thought it might be helpful to see how I used jQuery to construct a small function I needed. What follows is a detailed description, from the perspective of a near javascript illiterate.

### What I Was Looking To Do
In order to tighten up a layout, I wanted to take a very simple search box and label it on the inside of the box with a little helper note - then when the user clicks to enter a search term, the note should go away. If javascript is turned off, I want a real HTML **label** to show up outside the box (not as pretty, but accessible). **[Here's the demo page](http://web-graphics.com/pages/jquerryexample/)**.

### The jQuery code
First thing, lets call in the jQuery script on the page in the head:
<script type="text/javascript" src="jquery.js"></script>

Now lets put in the HTML as we’d want it to show without javascript:

<form action="#">
<label for="input\_search">Search</label>
<input type="text" id="input\_search" class="txtinput" />
<input type="image" id="go\_search" src="/img/btn_search.gif"
value="search" width="18" height="19" />
</form>

Now lets add the jQuery call that does what we’re after:

<script type="text/javascript">
$(document).ready(function(){
$(document.getElementById("input\_search")).set("value","Search")
$(document.getElementById("input\_search")).click(function(){
	$(document.getElementById("input\_search")).set("value","").unclick();
});
$("#fancysearch label").hide();
});
</script>

### So What Does This Do?
The first and last lines within the script tag get the attention of jQuery - “Hey jQuery, do this stuff in here.”

In the second line, you start off with a $, then (document.getElementById("input\_search")) means: “grab the element with an ID of **input\_search**” or “find the search box”.

That’s followed by a dot and the jQuery action “set” with it’s specifics in parenthesis ("value","Search"), meaning make the value of this thing “Search”.

So far so good - we’ve asked it to find the text input box, which we gave an ID of “input\_search”, and set it’s value to “Search”. This is what puts the helper text inside the search box.

Next up, we’ve got the same “Find the search box” and instead of “.set” we have “.click” followed by (function(){, which is the start of a function. So in other words, we’d like a function to start up when the search box is clicked on. The stuff that occurs on the next line is the stuff we’d like to actually happen on click.

Now we are onto the 4th line - it’s just like the second one, but instead we setting the value of the search box to "", in other words, making it blank. The .unclick(); part makes sure that this only happens the first time, in case someone decides to click out and then click back in, so it’s impossible to erase anything that was actually typed in.

The 5th line closes our what-to-do-on-click function.

The 6th line does the following: “find the **label** inside something with an ID of **fancysearch** and hide it! We’ve named our form here “fancysearch”, so it hides the label for us. This is preferable to hiding it via CSS, because we only want hide it if the script is actually working.

Ok, that’s all there is to it. Take a look at the documentation and examples over at the jQuery site for more information, this example just scratches the surface of course.

Posted in Javascript |

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.