Question

I have a <div id="comment_posting_holder"> tag that holds a form with two elements: a textarea box and a submit button.

I want to have the div tag (containing the textarea and submit button) disappear if I click somewhere “OTHER” than the submit button. I have a start for the code below. So upon leaving focus from the textarea, I can make the div tag disappear.

The problem is that if the div disappears, so does the submit button which means I cannot submit the form! How can I fix this?

Any suggestions? Thank you!

**Facebook does this with it’s comments. If you click on a “Post your comment…” field the textarea appears and then it will disappear upon losing focus other than if you pressed the submit button.

$('textarea').blur(function() {
     $('#comment_posting_holder').hide();
});

Answer 1

if you want an implementation like facebook, you need to check if someone has written something in the textbox.

You can see my answer working here

HTML

<div>
   <textarea class="comment_empty">Write a comment</textarea><br />
   <input type="submit" id="submit" value="Submit" style="display: none" />
</div>

jQuery

$(document).ready(function(){
    var submit = $("#submit");

    $("textarea").blur(function() {
        if ($(this).val() == "") {
            $(this).val("Write a comment")
                   .removeClass("comment_filled")
                   .addClass("comment_empty");
            submit.hide();
        }
    }).focus(function() {
        if ($(this).val() == "Write a comment") {
            $(this).val("")
                   .removeClass("comment_empty")
                   .addClass("comment_filled");
            submit.show();
        }
    });
});

some CSS

.comment_empty {
   color: gray;
   height: 30px;
}

.comment_filled {
   color: black;
   height: 100px;
}