#6967 closed bug (notabug)
Form in modal dialog submits on enter keypress if only one field present
| Reported by: | mnp5 | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.9.0 |
| Component: | ui.dialog | Version: | 1.8.9 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
Bizarre, I know.
I created a form with one visible field as follows:
<div id="addkeyword" style="display: none;" title="Quick-Add a Keyword"> <form action="null.php" method="POST" id="addkeywordform"> <div> <input type="hidden" name="obj" value="KWD"> <input type="hidden" name="fnc" value="ADD"> <input type="hidden" name="ctx" value="CAS"> </div> <table> <tr><td id="addkeyword-keywordprompt">Keyword<td><input type="text" name="keyword" id="addkeyword-keyword" style="width: 250px;">
</table> </form> </div>
I set this up as a modal dialog box that is called when a user selects the embedded option "(quick-add)" from an autocomplete text field in a prior form as follows:
function keywordSelectHandler(event,ui,objArray,elementstub,title) {
$('#'+elementstub).val(); if (ui.item.name == 'ADD') {
$('#addkeyword-keyword').val(); $('#keywords').val(); $("#addkeyword").dialog({minWidth: 400, modal: true, title: title,
draggable: false, resizable: false, buttons: {
"Submit": function() {
var validated = true;
if ($('#addkeyword-keyword').val() == ) {
validated = false; $('#addkeyword-keywordprompt').css('color','red');
}
if (validated) {
$.ajax({
url: '/ajaxform.php', type: 'POST', dataType: 'json', data: ($('#addkeywordform').serialize()), error: function() {
alert('something went wrong');
}, success: function(json) {
var messages = $('#messages'); if (json[0] == 'error') {
messages.attr('title','error!'); messages.html(json[1]); messages.dialog({
modal: true
});
}
if (json[0] == 'ok') {
ui.item.name = json[1]; ui.item.shortform = json[2]; ui.item.value = json[2]+' ('+json[3]+')'; ui.item.blinky = true; addobjtolist(ui,objArray,elementstub); ui.item.name = 'ADD'; $('#addkeyword').dialog("close");
}
}
});
}
},
Cancel: function() {
$(this).dialog("close"); $('#'+elementstub).focus();
}
},
close: function() {
$('#'+elementstub).focus();
}
});
} else {
addobjtolist(ui,objArray,elementstub);
} $('#'+elementstub).val(); return false;
}
If the user hits the enter key while focused on the "keyword" field in the modal dialog, the form submits.
If, however, I add the following to the initial form declaration
<tr style="display: none"><td>(unused)<td><input type="text" name="neverused-jqueryui_may_have_bugs">
the form does not submit when the enter key is pressed.
This may well be because of my poor coding skills -- I don't really know what I'm doing.
Occurs in Firefox 3.6.13, Opera 11.0. Haven't tested other browsers.
Change History (8)
comment:1 Changed 12 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
comment:2 Changed 12 years ago by
mnp5 is correct. With one field, the enter keypress is enabled. With two fields, the enter keypress is disabled. jQuery UI overrides the default HTML behavior, but inconsistently.
jsFiddle (two inputs): http://jsfiddle.net/4PFWk/
jsFiddle (one input): http://jsfiddle.net/h7n2Y/
comment:3 Changed 12 years ago by
Scott is right, this is not related to jQuery UI or any JavaScript at all
no JavaScript (two inputs): http://jsfiddle.net/qekeb/
no JavaScript (one input): http://jsfiddle.net/mGmJG/
comment:6 Changed 11 years ago by
How can I reopen this ticket?? This is not invalid. The second test case shows a invalid form submit when enter is keypressed.
jsFiddle (two inputs): http://jsfiddle.net/4PFWk/
jsFiddle (one input): http://jsfiddle.net/h7n2Y/
comment:8 Changed 11 years ago by
Ok. This is a "normal" behavior. One workaroud I find to ignore it is:
$("#form").submit(function(){
return false;
});
This is just how HTML works. Try it without any JavaScript on the page. In the future, please do not paste code in tickets.