CODEWITHSUNDEEP
javascripthtmlforms
jwl
jwl

Reputation: 10514

Using enter to submit a form breaks after input fields are inserted - why and how to fix?

If an HTML form field has focus and you hit enter, the form will be submitted (unless you've done fancy things to bypass that). Weirdly though, if JavaScript adds a field into the form, that enter-to-submit behavior appears to break. For example:

http://jsfiddle.net/SChas/1/

function goose() { 
  document.getElementById("addhere").innerHTML="<input name=goose value=honk>";
}

function checkForm() {
  alert("ok");
}​

--

<form onsubmit="checkForm();">
  <input name="duck" value="quack">
  <div id="addhere"></div>
  </form>
<button onclick="goose();">add a goose</button>

​ (This is a contrived example attempting to be as concise as possible. The original code involved is more modern code with events attached in JavaScript, etc. But this is the simplest code that replicates the issue. Also, it is necessary in the real use case to dynamically modify the form by adding/removing fields.)

Anyway, you'll get a form that has a single field with a value "duck". Click into it and hit enter, and the form will submit (you'll see an "ok" alert and then JSFiddle will tell you not to post!).

However, if you click "add a goose", you get a new field. And now, you cannot hit enter to submit the form.

Why is this happening? I can't find anything about this behavior via google, perhaps I'm using the wrong search terms. But it happens in IE on Windows and Chrome and FF on OSX at least. So it seems like an intentional, perhaps to-specification, behavior. Is it some kind of security protection?

And, is there any way to restore the enter-to-submit behavior on the form once a field is inserted? A way other than to add onkey* events to the input fields?

FWIW, it doesn't seem to matter if the inputs are added via DOM methods (appendChild), or setting the innerHTML, using jQuery or old fashioned JavaScript.

Upvotes: 1

Views: 345

Answers (1)

Porco
Porco

Reputation: 4203

This is because the enter-to-submit behaviour only happens when it's the only input on the form.

You can restore it by putting a input with type=submit on the form, it doesn't even have to be visible.

Check it out: http://jsfiddle.net/SChas/10/

Upvotes: 2

Related Questions