title: How to stop enter key from submitting form when input area in jQuery ui form dialog is highlighted? (sample code)
body: <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>