Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#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:


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 ( == '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) {


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') { = json[1]; ui.item.shortform = json[2]; ui.item.value = json[2]+' ('+json[3]+')'; ui.item.blinky = true; addobjtolist(ui,objArray,elementstub); = 'ADD'; $('#addkeyword').dialog("close");






Cancel: function() {

$(this).dialog("close"); $('#'+elementstub).focus();



close: function() {




} else {


} $('#'+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 10 years ago by Scott González

Resolution: invalid
Status: newclosed

This is just how HTML works. Try it without any JavaScript on the page. In the future, please do not paste code in tickets.

comment:2 Changed 9 years ago by thinkterry

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):

jsFiddle (one input):

comment:3 Changed 9 years ago by rdworth

Scott is right, this is not related to jQuery UI or any JavaScript at all

no JavaScript (two inputs):

no JavaScript (one input):

comment:4 Changed 9 years ago by jcstarck

This is a bug !!! Occurs in firefox 7.01 too and IE 8.

comment:5 Changed 9 years ago by Corey Frang

#7807 is a duplicate of this ticket.

comment:6 Changed 9 years ago by jcstarck

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):

jsFiddle (one input):

comment:7 Changed 9 years ago by Scott González

What's invalid about it?

comment:8 Changed 9 years ago by jcstarck

Ok. This is a "normal" behavior. One workaroud I find to ignore it is:


return false;


Note: See TracTickets for help on using tickets.