Question

I want the button to submit the form while the textarea is expanded. How do i do this?

The problem is that when I click the Post button in the form, while the textarea is expanded, it does not submit the form, instead it shrinks back down, and I need to click it again while it is smaller, to submit the form.

Currently in order to submit the post, i need to click the post button while the textarea is not expanded.

HTML

<form method='POST' action='elsewhere.php'>
    <textarea id="textarea" style="width:550px; height:25px;"></textarea>
    <input class="btn" type='submit' value='Post'/>                             
</form>

jquery

Currently when I click the text area, the height expands, and when i click elsewhere it shrinks. when i click the post button, while the textarea is expanded it doesnt submit the post, intead it shrinks the textarea back down.

$('#textarea').click(function(){
    $(this).css('height','100px')
    $(this).html('');
    $(this).blur(function(){
        $(this).css('height','25px')

    });
})

Answer 1

I think its some z-index related issue. Try giving position: relative; z-index:1; to the submit button.

If you have set z-index for the textarea or any of its ancestors, increment that value by one and set it to the button.

There is a chance of the button being overlapped by the textarea while increasing its height.
And you too mentioned that, while the textarea is expanded it doesnt submit the post. It may be because of the button is overlapped.

Update:

I got it after

The problem is that when I click the Post button in the form, while the textarea is expanded, it does not submit the form, instead it shrinks back down, and I need to click it again while it is smaller, to submit the form.

$('#textarea').click(function(){
$(this).css('height','100px')
$(this).html('');
$(this).blur(function(){
    if(this.value === ''){
        $(this).css('height','25px')
    }

});
});