Databases
StackOverflow2013
Postsdbo
POHow to stop enter key from submitting form when input area in jQuery ui form dialog is highlighted? (sample code)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to stop enter key from submitting form when input area in jQuery ui form dialog is highlighted? (sample code)
    text
    copied!<p>See code below for working demo. A jQuery UI modal dialog box is opened, and the user is asked to enter a password. If the <code>submit</code> button is highlighted, everything works just fine. If, however, the input area is still highlighted, then the page appears to reload, and the URL in the browser is changed to <code>example.com?confirm_password=asdfasdf#</code>.</p> <p>I suspect this is because I have a form embedded in the dialog box, but this is based on a jQuery example.</p> <p>How can I fix this so that pressing the enter key with the text input box highlighted is equivalent to clicking on submit?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Problem Demo&lt;/title&gt; &lt;link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"&gt; &lt;script src="http://code.jquery.com/jquery-1.7.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#myDialog').dialog({ autoOpen: false, modal: true, buttons: { "Submit": function() { $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } } }); $('#openMyDialog').click(function() { $('#myDialog').dialog('open'); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;a id="openMyDialog" href="#"&gt;Open Dialog&lt;/a&gt; &lt;div id="myDialog"&gt; &lt;p style="text-align: left;"&gt;Please enter your password.&lt;/p&gt; &lt;form&gt; &lt;fieldset&gt; &lt;label for="confirm_password"&gt;Password&lt;/label&gt; &lt;input type="password" name="confirm_password" id="confirm_password" value="" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload