Skip to main content

Search and Top Navigation

#6967 closed bug (notabug)

Opened February 11, 2011 02:07AM UTC

Closed February 11, 2011 02:38AM UTC

Last modified October 22, 2011 01:25PM UTC

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.

Attachments (0)
Change History (8)

Changed February 11, 2011 02:38AM UTC by scottgonzalez comment:1

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.

Changed April 10, 2011 10:14PM UTC by thinkterry comment:2

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/

Changed April 10, 2011 11:08PM UTC by rdworth comment:3

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/

Changed October 22, 2011 03:58AM UTC by jcstarck comment:4

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

Changed October 22, 2011 06:43AM UTC by gnarf comment:5

#7807 is a duplicate of this ticket.

Changed October 22, 2011 12:53PM UTC by jcstarck comment:6

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/

Changed October 22, 2011 01:23PM UTC by scottgonzalez comment:7

What's invalid about it?

Changed October 22, 2011 01:25PM UTC by jcstarck comment:8

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

$("#form").submit(function(){

return false;

});