Prevent Page Load on Jquery Form Submit with None Display Button

Question

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.

HTML:

<div id="bot"><form>
<input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
<button id="user-submit" type="submit">Send</button>
</form></div>

JAVASCRIPT:

$('#bot').on('click', '#user-submit', function(e) {
e.preventDefault();
message = $('#user-response').val();
message = message.toLowerCase();
sendUserResponse();
getBotResponse(message);
});

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.

EDIT:

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.

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.

EDIT 2

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.

Answer 1

I think you're looking for AJAX. AJAX lets you send the form data to a back end PHP file (that can then insert data into a DB, and/or get data from the DB) without reloading the page.

The page is reloading because you are using a <form>. When the submit button is pressed, it submits the form, which always refreshes the page. However, if you use AJAX you can send the data, (optionally receive a response) and carry on as normal.

In fact, when you are using AJAX you don't even need to use a <form> structure -- simple DIVs work just fine. Then you don't need to use event.preventDefault() to suppress the built-in form refresh.

Check out this post and especially its examples. Copy them onto your own system and see how they work. It's pretty simple.

---

Also, change the Submit button's type from type="submit" to type="button"

---

To detect when a user presses ENTER in the input field, and then click the submit button, try this:

$(function(){
    $('#user-response').keyup(function(){
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '27'){ $('form').fadeOut();}
        if(keycode == '13'){ 
            $('#user_submit').click();
        }
    });
});

Answer 2

In such case when you don't need to have the submit button, just use form's submit method, like first you provide your form tag an id (e.g. myForm)

<div id="bot">
  <form id="myForm">
    <input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
    <button id="user-submit" type="submit" style="display: none !important;">Send</button>
  </form>
</div>

and then to submit the form use

document.getElementById("myForm").submit();

and if you want this to happen when you press enter in textbox then use it like

$('#user-response').on('keypress', function(event){
   if (event.which === 13 || event.keyCode === 13) {
      document.getElementById("myForm").submit();
   }
});