Problem in input value and my jquery code

Question

Im using this code for my inputs:

$(document).ready(function(){
$('.add-news').each( function () {
    $(this).val($(this).attr('defaultValue'));
    $(this).css({'color':'#686868' ,  'font-size':'11px', 'font-weight':'bold'});
});
$('.add-news').focus(function(){
    if ( $(this).val() == $(this).attr('defaultValue') ){
        $(this).val('');
        $(this).css({'color':'#686868' , 'font-size':'11px' ,'font-weight':'bold'});
    }
});
$('.add-news').blur(function(){
    if ($(this).val() == '' ){
        $(this).val($(this).attr('defaultValue'));
        $(this).css({'color':'#686868' ,  'font-size':'11px', 'font-weight':'bold'});
    }
});

});

But in post, It posts 'defaultValue' not $_POST['name']. How can I avoid this? Thanks in advance

Answer 1

You could filter out all those entries when posting the form, for example:

$("form").submit(function() {
  $(".add-news").val(function(i, v) {
    return v == $(this).attr("defaultvalue") ? "" : v
  });
});

This would clear out all those boxes with the default value just before submitting.

Answer 2

Your fields have the default value if the user isn't in the field, so naturally when you post the form, that's what will get posted. How 'bout something like this:

Style:

.showingDefault {
    color:       #686868;
    font-size:   11px;
    font-weight: bold;
}

JavaScript:

$(document).ready(function(){
    $('.add-news').each( function () {
        var $this = $(this);
        $this.val($this.attr('defaultValue'));
        $this.addClass('showingDefault');
    });
    $('.add-news').focus(function(){
        var $this = $(this);
        if ( $this.val() == $this.attr('defaultValue') ){
            $this.val('');
            $this.removeClass('showingDefault');
        }
    });
    $('.add-news').blur(function(){
        var $this = $(this);
        if ($this.val() == '' ){
            $this.val($this.attr('defaultValue'));
            $this.addClass('showingDefault');
        }
    });

    // Hook up a submit handler on the form
    $(your_form_selector_here).submit(function() {
        $('.add-news.showingDefault').val('');
    });
});

That submit handler at the end wipes out the values on any elements with the class flagging that they're showing the default value.

(There I've also done the off-topic thing I mentioned in my comment on the question; if you don't want that, just remove the vars and do a search-and-replace changing $this to $(this).)