Opened 12 years ago

Closed 12 years ago

Last modified 11 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 12 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 12 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 12 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 11 years ago by jcstarck

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

comment:5 Changed 11 years ago by Corey Frang

#7807 is a duplicate of this ticket.

comment:6 Changed 11 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 11 years ago by Scott González

What's invalid about it?

comment:8 Changed 11 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.