Clear input box on click with Jquery

Question

I have a simple code that I'm trying to wrok into my website to clear a textbox with a default value, when a user click on it, the default value should clear out so that the user can enter his/her value. Here is what I have but I'm not sure if its correct since its not working. I just started on JQuery

   $(document).ready(function()
  {
        $('#startDateBox').click(function()
        { 
            if(('#startDateBox')=='Beginning')

            {
             $('#startDateBox').val(''); 
            }

         })
   });

Well, if(('#startDateBox')=='Beginning') will always be false... — Chad
– Chad, Commented Mar 11, 2013 at 18:46
When I debug it, when I click in the box, it doesn't clear out the default value, which is the word Begining. I feel like I'm missing something in my code — Tuan Nguyen
– Tuan Nguyen, Commented Mar 11, 2013 at 18:46
$('#startDateBox').val(), if 'beginning' is the text inside it.. — ssilas777
– ssilas777, Commented Mar 11, 2013 at 18:47
<input id="startDateBox" type="text" placeholder="Beginning" />, HTML5 has this built in ? — adeneo
– adeneo, Commented Mar 11, 2013 at 18:48

BinaryTox1n · Accepted Answer · 2013-03-11 18:54:51Z

3

You missed the first .val(), and the $ in front of the ('#startDateBox') on the same line. You could also use $(this) to reference the textbox, as within that function this refers to the textbox DOM element itself. Wrapping it with the jQuery function $() gives you access to all the framework's goodies.

$(document).ready(function()
{
    $('#startDateBox').click(function(){  
         if($(this).val() == 'Beginning')
                 ^^^^^^ Here
         {
             $(this).val(''); 
         }
    })
});

edited Mar 11, 2013 at 18:54

answered Mar 11, 2013 at 18:46

BinaryTox1n

3,5861 gold badge38 silver badges44 bronze badges

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

1 Comment

Iswanto San Over a year ago

and missing $ in that line

Iswanto San · Accepted Answer · 2013-03-11 18:46:12Z

3

You're wrong in this part:

 if(('#startDateBox')=='Beginning')

First, you missing $. Second, I think you want compare the startDateBox value, then use val().

Try this:

 $(document).ready(function()
  {
        $('#startDateBox').click(function()
        { 
            if($('#startDateBox').val()=='Beginning')
            {
             $('#startDateBox').val(''); 
            }
         })
   });

answered Mar 11, 2013 at 18:46

Iswanto San

18.6k13 gold badges60 silver badges79 bronze badges

Comments

Chad · Accepted Answer · 2013-03-11 18:46:49Z

0

Well, if(('#startDateBox')=='Beginning') will always be false...

I think you meant something more like:

if($('#startDateBox').val() == 'Beginning')

answered Mar 11, 2013 at 18:46

Chad

19.6k4 gold badges54 silver badges75 bronze badges

Comments

Rob M. · Accepted Answer · 2013-03-11 18:50:53Z

0

I wrote a very small jquery plugin for this purpose recently:

https://gist.github.com/rmcvey/5136582

$('#input').placeholder("Placeholder Text");

if($('#input').val() === $('#input').placeholder()){ return false; }

answered Mar 11, 2013 at 18:50

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Comments

Scott Selby · Accepted Answer · 2013-03-11 18:55:22Z

0

I would suggest for HTML5 browsers use this

 <input type="text" id="Beginning" placeholder="Beginning"  />

if($('#startDateBox').val() =='Beginning')

this is the line that needs to be changed

also

        $('#startDateBox').on("focus", function()
        { 
          // code here

the click will not handle hitting tab until that text box is focused

edited Mar 11, 2013 at 18:55

answered Mar 11, 2013 at 18:46

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

1 Comment

Scott Selby Over a year ago

fixed , the placeholder attribute handles all that for you as well in newer browsers

Collectives™ on Stack Overflow

Clear input box on click with Jquery

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Related