form onsubmit not called with multiple spans each containing an input

Question

works:

<form class=filter onsubmit="alert('submit');">
    <span class=a></span>
    <span class=b> <input type=text name=b /> </span>
</form>

doesn't work:

<form class=filter onsubmit="alert('submit');">
    <span class=a></span>
    <span class=b> <input type=text name=b /> </span>
    <span class=c> <input type=text name=c /> </span>
</form>

By work, I mean that when I type in text and hit enter, the form onsubmit is called (a simple alert). Why doesn't it fire in the second case? What is the best way to fix it or get around it? I could put a separate onchange event on each input in the html, or add the events through javascript/JQuery. Is that the best approach?

I've got a "table" built from divs for rows and spans for entries. The form is one row in the table. Wrapping the inputs inside spans makes the formatting (mainly column widths/spacing) more uniform. Then the actual input element is set to 80% of the span width.

I tried adding a div around the spans inside the form (from http://stackoverflow.com/questions/3572104/what-to-replace-span-in-form-with-in-xhtml-1-1-the-tag-form-cannot-conta) without success. — jmilloy, Mar 22 '12 at 16:53
The problem lies simply in _multiple inputs without a submit_. Don't assume that it has to do with `spans`. Keep an open mind :D. — calebds, Mar 22 '12 at 17:00

score 4 · Accepted Answer · edited May 23 '17 at 12:01

4

You should really wrap your attribute values in ""s.
Depending on the browser, the Enter key may only cause a form submission if the form has exactly one text field, or only when there is a submit button present. To get around this you could try the above with a hidden input type="submit", or use a combination of jQuery's keypress and submit to detect an enter keypress and submit the form programmatically.
- How to detect pressing Enter on keyboard using jQuery?

edited May 23 '17 at 12:01

Community

1
1

answered Mar 22 '12 at 16:53

calebds

25,670
9
46
74

Thanks, I thought I'd tested it without the spans but you're right, it's not the spans that cause the onsubmit not to fire on enter but having multiple inputs at all. – jmilloy Mar 22 '12 at 16:59
When I made the submit button hidden, it no longer triggers the onsubmit. I'll just use some js, thanks. – jmilloy Mar 22 '12 at 17:06
Oh, and how come wrap the values in quotes? If it makes any difference... the site is html5 and I have 6 users who use modern browsers (or whatever I tell them to use). – jmilloy Mar 22 '12 at 17:09
@jmilloy It is required by XHTML spec, not required for HTML5 simple attribute values, but highly [recommended](http://stackoverflow.com/questions/6495310/do-you-quote-html5-attributes). For a college security course I wrote a website virus that used lack-of-quotes as an entry point. – calebds Mar 22 '12 at 17:17
@paislee is your second point (forms w/ multiple input elements must have an, optionally hidden, `` element) a documented part of the HTML/5 spec? I can confirm it works (thanks), though I can't think of why it would be required. – James Conkling Apr 30 '18 at 19:00

score 2 · Answer 2 · answered Mar 22 '12 at 16:52

2

Where is your input button for submitting?

I just tried this in jsfiddle and it worked:

<form class=filter onsubmit="alert('submit');">
    <span class=a></span>
    <span class=b> <input type=text name=b /> </span>
    <span class=c> <input type=text name=c /> </span>
    <input type='submit' />
</form>

answered Mar 22 '12 at 16:52

Justin Pihony

66,056
18
147
180

Okay. I don't want a submit button, I want to submit the form after hitting enter in any of the fields. – jmilloy Mar 22 '12 at 16:58

form onsubmit not called with multiple spans each containing an input

2 Answers2