JQuery - google chrome won't get updated textarea value

Question

I have a text box with the default text 'write comment ...'. when the user updates the text box and clicks "add comment". Google Chrome does not receive 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 is much appreciated.

Answer 1

I believe that you should use val (), not html () in the text box.

For Chrome, on the other hand, use the placeholder attribute in the text box. You will not need much of this code.

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