Usability - Enter key does not submit form
tboyko opened this issue · 14 comments
For forms loaded via AJAX to a modal, pressing enter does not submit the form.
Cannot reproduce this issue.
Make sure you actually have a submit button in your form otherwise it will never submit on enter.
You can put the submit button in a .form-actions element (as in the bootstrap form-horizontal examples) and it will never be displayed.
I performed some additional tests and was able to narrow down the issue. It seems to only happen when there are more than one text fields and password fields combined. In other words, a form with a single text field or password field is submitting with the enter key, but if there is one text field AND one password field, or any other combination of text and password fields, the form will not submit on enter. I can take a non-working form with one text field, one password field, and a collection of radio buttons, and remove the password or text field to get the form to work again. Does this ring any bells for you?
Disclosure: I am using bootstrap 2.0, though I don't believe it interferes with this aspect of form submission (and I'm yet to see where your library conflicts with bootstrap 2.0 for that matter).
An additional note: I've been placing all of my buttons in a div.actions class and haven't had any issues. I assume this is supported as well?
Is not supported in version 2.0-wip and above, as bootstrap changed the class from .actions to .form-actions
I'm a little confused. Here is what I was seeing with Bootstrap 2.0 and your master branch:
Using div.actions: buttons within actions are styled and positioned correctly in modal, but enter key does not work for forms with more than one text/password input.
Using div.form-actions: button positioning is off (included on bottom left of form and not vertically aligned with one another) but enter key works.
After upgrading to 2.0-wip:
Using div.actions: button positioning is off but enter key works.
Using div.form-actions: buttons are positioned correctly but enter key does not work.
What am I missing?
The not working enter key is probably caused by the jquery.forms plugin (http://jquery.malsup.com/form/).
I use this one to create an ajax form from the form to be submitted by pressing the enter key.
Looks like the version of the plugin I bundled has issues. Can you try to upgrade the plugin and check if your problem persists? If you cannot solve the problem by upgrading the plugin: Could you provide a test case (the dialog markup) which reproduces the problem?
No luck :(. Here is the HTML after it's been injected into the modal via AJAX. If you need it at an earlier phase, please let me know.
Thank you for your continued help!
<div class="modal" style="display: block; top: 92px; max-height: 528px; ">
<span style="float: right; width: 0px; " tabindex="0"></span>
<div class="modal-header">
<h3>Enroll</h3>
<span class="loader"></span>
<a href="#" class="close">×</a>
</div>
<div class="modal-body opened" id="open-dialog">
<h1 style="display: none; ">Enroll</h1>
<form accept-charset="UTF-8" action="/admin/devices" class="" id="new_device" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="LFhMvXmw8ZlLDQroh4YgEV5KOSjE8alFgCYNcYHbkt0=">
</div>
<div class="field">
<label for="device_configuration_profile_id">Group</label>
<select id="device_configuration_profile_id" name="device[configuration_profile_id]">
<option value="23">asdf</option>
<option value="24">test</option>
</select>
</div>
<div class="field">
<label for="device_name">Device name</label>
<input id="device_name" name="device[name]" size="30" type="text">
</div>
<div class="field">
<label for="device_enrollment_email">Enrollment email address</label>
<input id="device_enrollment_email" name="device[enrollment_email]" size="30" type="text">
</div>
<div class="form-actions" style="display: none; ">
<input class="btn-primary" name="commit" type="submit" value="Create">
<a class="btn close-dialog" href="#">Cancel</a>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Create</a>
<a href="#" class="btn close-dialog">Cancel</a>
</div>
<span style="float: right; width: 0px; " tabindex="0"></span>
</div>I came across this just now. I'm wondering if this is the situation we're running to, which would make it more of a jquery/jquery.form issue:
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. The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.
http://api.jquery.com/submit/
In terms of usability, I'm not sure why the behavior is like this. I'm planning on incorporating the following jQuery binding at page load to override it. Can you think of any resulting usability issues?
$('form').live('keypress', function(e) {
if (e.keyCode == 13 && e.target.type != "textarea")) {
$(this).submit();
}
});
Thoughts?
I was suspecting something like that :-).
Your workaround looks fine. However you should add e.preventDefault() or apply some other trick to make sure that the form is not submitted twice in browsers which recognize the ENTER key for form submission.
Great. Thanks Nikku.
It may be an input causing this. An input with a value="close" or data-modal="close" will close the modal on enter keypress.
Solutions:
Add type="button" to the input, without this the browser thinks it's type="submit"
You can also change this to an anchor with a class of btn, the form will submit properly.
Switch the order of the inputs :)
.live() was deprecated in jQuery 1.7 and removed in 1.9, we should use .keypress() like this:
$("#modal_form").keypress(function(e) {
if ((e.keyCode == 13) && (e.target.type != "textarea")) {
e.preventDefault();
$(this).submit();
}
});Yes, that is correct. Replacing it with on would be my preferred option.
Thanks. work nice it!!!!