jQuery - google chrome won't get updated textarea value

Question

Hi, I have a textarea with default text 'write comment...'. when a user updates the textarea and clicks 'add comment' Google chrome does not get the new text. heres my code;

function add_comment( token, loader ){
$('textarea.n-c-i').focus(function(){
    if( $(this).html() == 'write a comment...' ) {
        $(this).html('');   
    }
});
$('textarea.n-c-i').blur(function(){
    if( $(this).html() == '' ) {
        $(this).html('write a comment...'); 
    }                                 
});
$(".add-comment").bind("click", function() {
    try{
        var but = $(this);
        var parent = but.parents('.n-w');
        var ref = parent.attr("ref");
        var comment_box = parent.find('textarea');
        var comment = comment_box.val();
        alert(comment);
        var con_wrap = parent.find('ul.com-box');
        var contents = con_wrap .html();
        var outa_wrap = parent.find('.n-c-b');
        var outa = outa_wrap.html();
        var com_box = parent.find('ul.com-box');
        var results = parent.find('p.com-result');
        results.html(loader);
        comment_box.attr("disabled", "disabled");
        but.attr("disabled", "disabled");
        $.ajax({ 
            type: 'POST', url: './', data: 'add-comment=true&ref=' + encodeURIComponent(ref) + '&com=' + encodeURIComponent(comment) + '&token=' + token + '&aj=true', cache: false, timeout: 7000, 
            error: function(){ $.fancybox(internal_error, internal_error_fbs); results.html(''); comment_box.removeAttr("disabled"); but.removeAttr("disabled"); }, 
            success: function(html){ 
                auth(html);
                if( html != '<span class="error-msg">Error, message could not be posted at this time</span>' ) {
                    if( con_wrap.length == 0 ) {
                        outa_wrap.html('<ul class="com-box">' + html + '</ul>' + outa);
                        outa_wrap.find('li:last').fadeIn();
                        add_comment( token, loader );
                    }else{
                        com_box.html(contents + html);
                        com_box.find('li:last').fadeIn();
                    }
                }
                results.html('');
                comment_box.removeAttr("disabled");
                but.removeAttr("disabled");
            }                           
        });
    }catch(err){alert(err);}
    return false;
});

}

any help much appreciated.

Answer 1

I believe you should be using val() and not html() on a textarea.

On a side note, for Chrome use the placeholder attribute on the textarea. You won't need a lot of this code.

<textarea placeholder="Write a comment"></textarea>