Question

I created a simple jquery plugin that puts ‘greyed out’ text into a textbox if the field is blank (watermark for textboxes). The problem is when i submit the form and i’m trying to get the value of the text box, it’s returning the watermark text instead of an empty field.

The watermark text is equal to the “title” attribute, so i could do something like this, but i’d hate to do this for EVERY textbox in my form:

if ($("#textboxid").val() == $("#textboxid").attr("title")) {
  //default, return empty string
} else {
  //user entered this
}

Ideally, this would be part of my plugin and it would return an empty string when i call .val()
Any suggestions on how to do this?

Answer 1

I have something like this for my custom made watermark/placeholder plugin i’ve made. I just handle it onclick (the submit button for your form) and then loop through everything.

Updated jsFiddle DEMO

(function ($, window, document, undefined) {

    $.fn.myCustomVal = function () {
        return $(this).each(function () {
            var _self      = $(this),
                _watermark = _self.attr('title');

            _self.attr('data-watermark', 'on');
            _self.val(_self.attr('title'));

            _self.on('focus', function () {
                $(this).val('');
            });
            _self.on('blur', function () {
                $(this).val(_watermark);
            });
        });            
    };

    $(function () {
        // change this class here to whatever you want
        $('.btnSubmit').on('click', function () {
            $('input:text[data-watermark]').each(function () {
                if ($(this).val() == $(this).attr("title")) {
                    $(this).val('');
                }
            });

            // now validate / submit / whatnot
            alert('submitted!');
        });
    });

}(jQuery, window, document));

// ************************
// Initiate plugin
$('input:text').myCustomVal();

​