Prevent Page Load on Jquery Form Submit with None Display Button

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();
        }
    });
});