Empty input box onclick in jQuery

Question

I've no idea why this isn't working, but I'm sure it's a very common bit of Javascript. My syntax is clearly lacking, and I don't know why:

<input type="text" value="search" id="search" name="q" onclick="javascript:if($(this).val() == 'search') {$(this).val() = '';} return false;" />

James Hill · Accepted Answer · 2012-03-19 12:44:55Z

15

Your issue is with this line of code:

$(this).val() = ''

The proper way to set a value in jQuery is:

$(this).val("Your value here");

In addition, inline JS is never a good idea. Use this instead:

$("#search").on("click", function() {
    if ($(this).val() == "search")
        $(this).val("")
});

Here's a working fiddle.

References: jQuery .val()

answered Mar 19, 2012 at 12:44

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom · Accepted Answer · 2012-03-19 12:50:19Z

4

Put this in a separate js file...

this will return it to the initial value if nothing is typed after it loses focus.

$(document).ready( function() {
    $("#search").focus( function() {
        if ( $(this).val()=="search") {
            $(this).val('');
        } 
    });

    $("#search").blur( function() {
        if ( $(this).val()=="") {
            $(this).val('search');
        } 
    });
});

edited Mar 19, 2012 at 12:50

answered Mar 19, 2012 at 12:42

Tom

13k50 gold badges154 silver badges249 bronze badges

1 Comment

Chuck Le Butt Over a year ago

This is also great, I actually wrote the same code after James's answer. Thanks, though!

Vimalnath · Accepted Answer · 2012-03-19 12:53:37Z

3

It should be like this:

<input type="text" value="search" id="search" name="q" onclick="javascript:if($(this).val() == 'search') {$(this).val('');} return false;" />

correct way   : $this.val('');
incorrect way : $this.val() = '';

answered Mar 19, 2012 at 12:53

Vimalnath

6,4732 gold badges29 silver badges47 bronze badges

Comments

Flash · Accepted Answer · 2012-03-19 12:45:21Z

2

$(this).val() = '';

should be

$(this).val('');

See .val() documentation.

answered Mar 19, 2012 at 12:45

Flash

16.9k15 gold badges74 silver badges100 bronze badges

Comments

Chuck Le Butt · Accepted Answer · 2016-10-06 10:41:45Z

1

This has become easier with a HTML5 Placeholder:

<input type="text" name="search" placeholder="Enter your search query here">

It's not supported in older browsers, but if you're only targeting modern ones, you should be fine to use it: http://caniuse.com/#feat=input-placeholder

edited Oct 6, 2016 at 10:41

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

answered Oct 4, 2016 at 10:28

Jarown

113 bronze badges

1 Comment

Chuck Le Butt Over a year ago

The placeholder attribute does indeed make this much easier (provided your browser supports it), but you should avoid just posting links as answers. Links have a tendency to rot and disappear. The main content should be posted into your answer.

themhz · Accepted Answer · 2012-03-19 12:40:29Z

0

no you need $(this).val(""); or $(this).val(''); to empty it

<input type="text" value="search" id="search" name="q" onclick="javascript:if($(this).val() == 'search') {$(this).val('');} return false;" />

answered Mar 19, 2012 at 12:40

themhz

8,43622 gold badges86 silver badges109 bronze badges

Comments

Vishal Vaghasiya · Accepted Answer · 2019-12-25 06:33:17Z

0

You can clear the input field by using

$(this).val('');

answered Dec 25, 2019 at 6:33

Vishal Vaghasiya

2,1203 gold badges17 silver badges21 bronze badges

Comments

dhinesh · Accepted Answer · 2012-03-19 12:44:06Z

-2

function search(textBox)
{
   if($(textBox).val() == 'search') {
        $(textBox).val() = '';
   } 
   return false;
}

<input type="text" value="search" id="search" name="q" onclick="return search();" />

Try this and debug.

answered Mar 19, 2012 at 12:44

dhinesh

4,8142 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

Empty input box onclick in jQuery

8 Answers 8

Comments

1 Comment

Comments

Comments

1 Comment

Comments

You can clear the input field by using

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

Comments

1 Comment

Comments

You can clear the input field by using

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related