JQuery Ajax working only once on pressing submit and the next time the page refreshes

Question

I have a form on my webpage and it uses JQuery Ajax. Now, when I press submit the first time, the code is executed and the data is submitted and the message appears. The problem is, if there is a message like "You cannot leave the field blank", and then I correct the details and press submit, the page reloads which should not happen. My JQuery -

$(document).ready(function () {
    $('form').submit(function () {
        $('#content').fadeOut(100, function () {
            $(this).html('
                <img src="//mywebsite.com/spinner.gif"/>
                <div style="display:inline;color:#1FAEFF">Loading...</div>
           ').fadeIn(100);
        });
        $.get('submit.server', $(this).serialize(), function (data) {
            $('#content').html(data);
        });
        return false;
    });
});

I tried replacing the $('form').submit(function(){ to $('form').live('submit', function() { but it doesn't work. Please Help! I am using the latest JQuery version from the website. edit - I also tried on. The same thing Happens. Also, my form has multiple forms which are handled by this same script. One of my forms -

<form action="submit.server" method="GET">
    <label for="form" style="color:#1FAEFF;">Change Your EmailAddr :
        <br>
    </label>
    <div style="float:left;margin-top:20px">
        <input type="email" class="forminput" name="gotemail" />
        <br />
        <input type="hidden" value="email" name="data" />
        <button name="submit" value="email" class="action"
            style="width:150px;height:70px">Submit</button>
    </div>
</form>

have you tried putting it on button click instead of form submit — CR41G14, Feb 13 '13 at 15:15
@CR41G14 Bad idea -- there are ways to submit a form without clicking the button. — Blazemonger, Feb 13 '13 at 15:15
What is `'submit.server'`? That doesn't look like a valid URL to me. — Blazemonger, Feb 13 '13 at 15:16
this [**Fiddle**](http://jsfiddle.net/PVd3y/) seems to work just fine for me ! — adeneo, Feb 13 '13 at 15:19
@CR41G14 Please help me. I need to make this work urgently... — Nikhil Ramakrishnan, Feb 13 '13 at 16:05
How did you try `on`? It's not as simple as changing "live" to "on". Does this work: `$(document).on("submit", "form", function() { //...});` — Adam Tomat, Feb 13 '13 at 16:27

score 0 · Accepted Answer · edited May 23 '17 at 10:24

As stated in the comments by

@soyuka: live has been depreceated since 1.9 use on instead ;)

This is the correct syntax for .on():

$(document).on("submit", "form", function() { });

Here are some useful links to understand the difference between .live and .on:
jQuery 1.7+ .on() vs .live() Review

What's the difference between jQuery .live() and .on()

And intergrated with your code:

$(document).ready(function () {
   $(document).on("submit", "form", function() {
        $('#content').fadeOut(100, function () {
            $(this).html('
                <img src="//mywebsite.com/spinner.gif"/>
                <div style="display:inline;color:#1FAEFF">Loading...</div>
           ').fadeIn(100);
        });
        $.get('submit.server', $(this).serialize(), function (data) {
            $('#content').html(data);
        });
        return false;
    });
});

JQuery Ajax working only once on pressing submit and the next time the page refreshes

1 Answers1