Jquery and search form problem

I can't get my jquery code to clear my search form when a user clicks in the search field can someone tell me what I'm doing wrong?

Jquery

$('#text').focus(function () {
    if ($(this).val() == $(this).attr("title")) {
        $(开发者_StackOverflow社区this).val("");
    }
}).blur(function () {
    if ($(this).val() == "") {
        $(this).val($(this).attr("title"));
    }
});


$("#searchForm").submit(function() {
    $("#text").each(function() {
        if($(this).val() == this.title) {
    $(this).val("");
    }
    });
});

html5 code

<header id="header">
<div id="header-con">
    <h1>
        <a href="" title=""><img src="" alt="" /></a>
    </h1>

    <nav id="nav">
        <ul>
            <li>a href="" title=""></a></li>
            <li>a href="" title=""></a></li>
            <li>a href="" title=""></a></li>
            <li>
                <form method="post" action="" id="searchForm">
                    <fieldset>
                        <input type="text" name="search" size="38" value="Search..." title="Search..." id="text" />
                        <input type="submit" name="submit" value="Search" id="sbutton" />
                    </fieldset>
                </form>             
            </li>
        </ul>
    </nav>
</div>
</header>

Since you're using HTML5, why aren't you using the placeholder attribute?

<input type="text" name="search" size="38" placeholder="Search..." id="text" />

...and done. No JavaScript.

It appears that you are not binding your event handlers on $(document).ready(..., so those elements are probably not present at the time the handlers are attached. Try:

$(document).ready(function() {

    // your event handler code

});

Why are you use $("#text").each(...), if only one same identifier was possible?

$("#searchForm").submit(function() {  
    $("#text").val("");
    returh false;
});

It works. You just need to bind your event handler, when the document is ready...

$(document).ready(function () {
    $('#text').focus(function () {
        if ($(this).val() == $(this).attr("title")) { $(this).val(""); } 
    }).blur(function () { if ($(this).val() == "") { $(this).val($(this).attr("title")); } });
});

Try my Plugin to solve your issue:

Working example: http://jsfiddle.net/gvs4Y/2/

(function($){
$.fn.extend({
    cc_value: function(options) {

        // Set Plugin defaults
        var defaults = {};

        // Set options
        var options = $.extend(defaults, options);

        return this.each(function() {

            // Cache options to shorter variable to access Options by o.myOption
            var o = options;

            // Cache $(this) Object to var obj
            var obj = $(this);

            // Save default Value to Data Attrirbute
            obj.data('defaultValue', obj.val());

            // Bind Events to given Object. Clear input or direct select user input value
            obj.bind('focus mouseup', function(e) {
                if (($(this).val()) === (obj.data('defaultValue'))) {
                    $(this).val('');
                } else {
                    // Select Value Text if it changed from default
                    this.select();
                    e.preventDefault();
                }
            });  

            // If the Focus is lost by bluring and nothing is changed restore the default value
            obj.blur(function() {
                newValue = jQuery(this).val();
                if (newValue === '') {
                    $(this).attr('value', jQuery(this).data('defaultValue'))
                }
            }); 
        });
    }
  });
})(jQuery);

Function call:

jQuery('YOUR SELCTOR').cc_value();

• Works with all specified Text-Inputs
• Nice Usabilty Improvements (Text marked if different form original value)