Comments (14)
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.
from jquery-bootstrap-scripting.
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).
from jquery-bootstrap-scripting.
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?
from jquery-bootstrap-scripting.
Is not supported in version 2.0-wip and above, as bootstrap changed the class from .actions
to .form-actions
from jquery-bootstrap-scripting.
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?
from jquery-bootstrap-scripting.
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?
from jquery-bootstrap-scripting.
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>
from jquery-bootstrap-scripting.
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?
from jquery-bootstrap-scripting.
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.
from jquery-bootstrap-scripting.
Great. Thanks Nikku.
from jquery-bootstrap-scripting.
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 :)
from jquery-bootstrap-scripting.
.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();
}
});
from jquery-bootstrap-scripting.
Yes, that is correct. Replacing it with on
would be my preferred option.
from jquery-bootstrap-scripting.
Thanks. work nice it!!!!
from jquery-bootstrap-scripting.
Related Issues (20)
- Pass data to modal HOT 1
- How to use this script? HOT 1
- BUG? document.write(variable); opens new page HOT 3
- Response Text with Ajax Button HOT 2
- No Reload after (dialog2.closed) HOT 5
- Call Dialog from a iframe HOT 1
- Rewrite controls() to use live update
- Create tag 1.2.0 for bower HOT 1
- Ajax links in modal-footer HOT 3
- Custom Modal Elements HOT 1
- Can't pass HTML button contents to modal HOT 2
- Feature Request: Suppress the modal close button. HOT 1
- POST vs GET for initial load from server HOT 1
- Page flow not working on downloaded version. HOT 1
- close modal on back button HOT 1
- Vertical scrollbar appears when using with bootstrap 2.3.2 HOT 2
- Bootstrap 3 support HOT 2
- [enhancement] Add missing bower.json.
- Issues when the main page is less than the window height and the modal's contents is higher than window width
- Enter key is not submitting the login form
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-bootstrap-scripting.