HTML click submit button twice

Question

I recently added a CSS3 focus styling to a element of a form (it grows vertically as to give more room to write). However, now when a user clicks the submit button, the textarea loses focus (and shrinks), but the form does not submit and the user must click submit again. Is there any solution to this?

Form:

<form name="postForm" id="post_form" onsubmit="return validate()" action="post.php" method="post" enctype="multipart/form-data">
    <textarea name="post" onkeydown="update()" onkeyup="update()" placeholder='Write Post...' id="post_area" ></textarea>
    <div id='post_extras'>
        <input class="admin_extra" id="post_button" type="submit" value="Post" />
        <input class="admin_extra" type="file" name="file" />
        <input class="admin_extra" placeholder="Image URL" type="url" name="url" />
        <div class="admin_extra" id='char_left'>5000 Characters Left</div>
    </div>
</form>

CSS:

#post_area{
height: 3em;
width: 100%;
display: block;
border: none;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding: 10px;
margin: 0;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}

#post_area:focus{
    height: 10em;
}

can you post your update code here? – Jibi Abraham Jul 28 '12 at 07:56 — Jibi Abraham, Jul 28 '12 at 07:56

score 0 · Answer 1 · answered Jul 28 '12 at 08:41

The reason for this happening is because when you leave the mouse from the text content area you lose the focus on other elements. This is the cause that you have to click twice on the post button to became activated. One kind of workaround would be to use the sliding effect only when you start to enter the text and once you finished you post it. So there is no sliding back. You can do this easily with jquery. If you want to post on click - you'll have to listen to that manually.

You can do this with the following code:

$("post_button").on('click', function(e) {
    e.stopPropagation();
    alert('clicked');
});

JSFiddle code:

http://jsfiddle.net/txXaq/1/

HTML click submit button twice

1 Answers1