How to keep submit button visible and executable upon textarea onblur

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

Was is not working because of the syntax error in your code. Other than the missing single quote, what you have looks good, so long as it is in an event that is actually firing. Try this:

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

Answer 2

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;
}

Answer 3

What I understand you want:
If the user clicks anywhere, and the element that was clicked was not the submit button, then hide the div.

Code to do that:

$(document).ready(function() {
  $(document).click(function(event) {
    if (event.target.id == "idOfSubmitButton") {
      //user clicked the submit button (make sure to give it an ID)
      //if you wanted to be really hardcore, you could submit the form here via AJAX
    }
    else {
      //user clicked anywhere on the page but the submit button
      //here you'd want to check and make sure someone has actually typed
      //something in the textarea, otherwise this will happen for every
      //click on a hyperlink, button, image, et cetera on the page
      $('#comment_posting_holder').hide();
    }
  });
});