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(''); 
            }

         })
   });​ 

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(''); 
            }

         })
   });​ 

• javascript
• jquery

• Can you define what is 'not working'? – Iswanto San Commented Mar 11, 2013 at 18:45
• Well, if(('#startDateBox')=='Beginning') will always be false... – 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 Commented Mar 11, 2013 at 18:46
• $('#startDateBox').val(), if 'beginning' is the text inside it.. – ssilas777 Commented Mar 11, 2013 at 18:47
• 2 <input id="startDateBox" type="text" placeholder="Beginning" />, HTML5 has this built in ? – adeneo Commented Mar 11, 2013 at 18:48

5 Answers 5

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(''); 
         }
    })
});​ 

You're wrong in this part:

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

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

Try this:

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

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

I think you meant something more like:

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

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

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

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

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

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