How to solve this onclick awkwardness?

Question

http://jsfiddle.net/wmuYq/

I want to eliminate an awkwardness: the user has to click the submit button twice to submit the text.

What should I do to make it work with one click?

Answer 1

You can set a timeout: http://jsfiddle.net/wmuYq/1/

document.getElementById("text1").onblur = function () {
   var target = this;
   setTimeout( function () {
        target.style.height='36px';
   }, 250);
}

Answer 2

You could use the onmousedown event on the submit button to submit the form:

document.getElementById("submitButton").onmousedown = function() {
   this.form.submit();
}

For the above example to work, you would need to give the button an ID. Also, you would need to change the name of the submit button from "submit" to something else, because otherwise it overwrites the submit property of the form element.

This works because the mousedown event will be triggered on the button before the blur event is triggered by the textarea .

Here's a working example .

Answer 3

Well for one thing you have no form, so I am not sure how it submits at all.

Wrap your code in a form and add an action and it should work fine :-)

Answer 4

This might work. Untested

Remove the onblur event from the textarea and place it as on onclick on the input

onclick="document.getElementById('text1').style.height='36px'"

Revised fiddle: http://jsfiddle.net/jasongennaro/wmuYq/2/