Text labels in textbox being passed onsubmit

Question

I found this useful little method of displaying field titles within the text fields themselves.

http://viralpatel.net/blogs/2009/09/default-text-label-textbox-javascript-jquery.html

Only problem is that if the fields aren't completed by the user then the title values get submitted.

Could anyone tell me how to add a onsubmit check to make sure we don't submit default text?

This is the javascript:

$('input[type="text"]').each(function () {

    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function () {
        if (this.value == $(this).attr('title')) {
            this.value = '';
            $(this).removeClass('text-label');
        }
    });

    $(this).blur(function () {
        if (this.value == '') {
            this.value = $(this).attr('title');
            $(this).addClass('text-label');
        }
    });
});

Many thanks...

When submitting the form, check each field's value against the field's title attribute. Seems that's what the plugin uses to add the text. — j08691
You might also want to use the Placeholder attribute instead (dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute) — isotrope
@isotrope that would have been perfect but it didn't work for me. Don't know if it's a bit too soon to use it? — Berni Ball

David Thomas David Thomas · Accepted Answer · 2012-03-15T19:51:58

Something like the following should work:

$('form').submit(
    function(e){
        $(this).find('input, select, textarea').each(
            function(){
                if ($(this).val() == this.title){
                    $(this).val(''); // removes the value
                    // or prevent form submission:
                    // return false;
                }
            });
    });

Text labels in textbox being passed onsubmit

1 Answers