我单击提交按钮时，用jQuery扩展了textarea，但未提交表单

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

If you are submitting the form and redirecting to another page, all you need is for the button to stay still long enogh to register the click, a timeout solves that problem:

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {$(self).css('height','25px') }, 200);
    }
});

FIDDLE

If using this with Ajax, and not redirecting, and to make the textarea not respond to the click on the button, you could use a variable to keep track of what element was clicked, and do somewhat the same as above:

var elm;

$('.btn').on('click', function(e) {
    elm = e.target;
    e.preventDefault();
    //do ajax stuff
});

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {
                if ($(elm).attr('class') != 'btn') $(self).css('height','25px');
            }, 200);
    }
});

FIDDLE

Answer 2

I think its some z-index related issue. Try giving position: relative; z-index:1; 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')
    }

});
});

Answer 3

I had a similar issue the other day, and what was happening was that the blur event on the textarea was occurring before the browser took into consideration the click event on the button.

Thus, in order, I was clicking on the button, THEN the browser fired the blur event on the textarea, shrinking it and moving the button, THEN the browser took the click in consideration, doing nothing because there was no longer a button where I clicked.

I did not directly fix the problem, though, deciding that I would shrink the textarea only if it was not empty (adding some this.value == this.defaultValue || this.value == '' test in the blur event).