Ajax Form doesn't remain on page

Question

Been beating my mind at this but its now time for me to ask for help (ask i got work tomorrow and dont want to be on this all night)

My form is inside a modal and this is my script

$(function() {
    $("#applyForm").on('submit' , function(e) {
        $.ajax({ 
            type: 'POST',
            url: $("#applyForm").attr("action"),
            data: $('#applyForm').serialize(),
            success: function(data){
              alert('successfully submitted')},
            error: function(data){
              alert('something went wrong')
          }

     });
});
});

It all works, It fires up the script and submits to the backend with a success message but as soon as you close the popup sucess message it redirects to the action "apply-now" page.

How can i prevent this without it breaking the submit, As i've tried return false and preventDefault.

Heres the form

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1"> 
<input name="listing_id" type="hidden" value="{$listing_id}">

MY FORM DATA

<button type="submit" id="submit" class="btn btn-warning">Apply now</button>

Any help would really be appreciated !

Thanks

J

`e.preventDefault()` will do the trick. – Nytrix Mar 30 '17 at 23:14 — Nytrix, Mar 30 '17 at 23:14

Nytrix · Answer 1 · 2017-03-31T00:54:59.537

Try this if you want the page not to reload:

$(function() {
    $("#applyForm").on('submit' , function(e) {
       e.preventDefault();
       //... the rest of your code
       //or add return false;
       return false;
    });
});

As you catch the actual submiting the "normal" process will happen, you don't wan't that. So you have to stop it by e.preventDefault(). You can read the documentation about it here.

Or look right here for an example where it stays on the same page.

$("#form").submit(function(e){
    e.preventDefault();
    $(this).append("The page is staying here");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
    <input type="text" name="first" id="first">
    <input type="submit" value="enter">
</form>

Hopefully this helps you.

score 0 · Answer 2 · edited May 23 '17 at 10:30

The form is being submitted twice. Once with the form action and the other time with the ajax call. If you prefer to have only the ajax call sent, returning false outside the ajax function should do the trick. When to use PreventDefault( ) vs Return false?

$(function () {
    $("#applyForm").on('submit', function (e) {
        //e.preventDefault();
        $.ajax({
            type: 'POST',
            url: $("#applyForm").attr("action"),
            data: $('#applyForm').serialize(),
            success: function (data) {
                alert('successfully submitted')
            },
            error: function (data) {
                alert('something went wrong')
            }

        });
        return false;
    });
});

When clicking on apply, the form says its be successfully submit however when checking inside the admin panel no form has actually been submitted.. Thats what I cant wrap my head around. :( Thanks! — user3516568, Apr 02 '17 at 22:03

Asif Raza · Answer 3 · 2017-03-31T03:26:37.980

I Hope this work.

1) <button type="submit" id="submit" class="btn btn-warning">
   Apply  now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
   change the type="submit" to type="button"

Example

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1"> 
<input name="listing_id" type="text" value="999">
 MY FORM DATA
 <button type="button" id="submit" class="btn btn-warning">Apply now</button>
 </form>

$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});

score 0 · Answer 4 · answered Apr 01 '17 at 22:56

You're not preventing the default form submission behavior. To fix up, add the following immediately before your Ajax call:

e.preventDefault();

Extra tip: to ensure the form only gets submitted once per "submit" click, stop the propagation of the click event from bubbling up through the DOM.

Immediately following the preventDefault, put this:

e.stopPropagation();

Ajax Form doesn't remain on page

4 Answers4