title: Prevent Page Load on Jquery Form Submit with None Display Button
body: <p>I have a chatbot of sorts set in MSDOS terminal style. The user types their response then hits enter. I have found that when I tag the button with "display: none;" it causes the page to reload on several browsers (my windows chrome browser doesn't reload. not sure why). How can I have the button hidden yet the form and code functioning properly? I would rather not use "position: absolute;" to send it off screen.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="bot"&gt;&lt;form&gt;
  &lt;input id="user-response" type="text" placeholder="" autocomplete="off" autofocus /&gt;
  &lt;button id="user-submit" type="submit"&gt;Send&lt;/button&gt;
  &lt;/form&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$('#bot').on('click', '#user-submit', function(e) {
  e.preventDefault();
  message = $('#user-response').val();
  message = message.toLowerCase();
  sendUserResponse();
  getBotResponse(message);
  });
  </code></pre>
  
  <p>I have tried various types of return: false;, event.preventDefault();, and such but everything works fine as long as I don't apply display: none; styling to the button. I've also changed it to input and type="button"/type="submit" but again display: none; causes the page to reload when hitting 'enter'. I have read about 20 different questions on page reload onclick query ajax etc... none of them seem to address this issue.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Used two of the suggestions below to check for key press "Enter" to submit the form but they continue the same pattern of failure. Form reloads the page if your submit button is styled display: none; The methods below work when the button is displayed visibly. Will check code for return values that may be causing submit and reload.
  Currently:
  Page with Visible button - works fine with any method.
  Page with Display: none button - causes reload under all given methods.</p>
  
  <p>Would also like to mention that the page reload is not present on Chrome 49.0.2623.87 for Windows 7 but present on all OS X browsers and some Windows browsers.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Bug: display: none; buttons cause page reload. Apparent on OS X browsers and some Windows. Solution: switch to full Ajax non-forms and should solve any problems. Will post working Ajax solution when put together. Correct answer below is for suggesting Ajax. Bug submitted to Chrome Dev and may be to other browsers debs later.</p>