Question

I have the following code to put helper text in a search input box that is removed when you click in the box and returned if you click anywhere else without changing it:

$('#search-form input[type="text"]').each(function(){
    var defaultVal = 'Category Search';
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('').css('color', '#000');;
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

But if the user clicks submit without clicking in the input box, the site will search for the helper value (Category Search).

What I need to do is on submit check the value and if it’s Category Search then do the following things:

• Change helper text to Please enter a category
• Don’t submit the form.

I tried this but it stopped my default value (Category Search) from working all together:

$('#search-form input[type="submit"]').click(function() {
    if ($(this).val() == "Category Search")
        //do stuff here
});​

Answer 1

jsBin demo

var defaultVal = 'Category Search';
var enterCat = 'Please enter a category';

$('#search-form input[type="text"]').each(function(){
  
    $(this).focus(function(){
      if ($(this).val() == defaultVal || $(this).val() == enterCat){
        $(this).removeClass('active').val('').css('color', '#000');
      }
    })
    .blur(function(){
      if ($.trim($(this).val()) === ''){
        $(this).addClass('active').val(defaultVal).css('color', '#CCC');
      }
    })
    .blur().addClass('active');
});

$('#search-form').submit(function(e) {
  
  if ( $(this).find('[type="text"]').val() === defaultVal){
    e.preventDefault();
    $(this).find('[type="text"]').prop('value', enterCat);    
  } 
  
});

and use also $.trim() (whitespaces) before searching for blank inputs 🙂