jQuery Ajax - how to continue to submit form after checking fields

Question

I'm new to Ajax and Jquery and want to perform some validation on a login page (using wordpress).

I use this code to catch the submit of the login form...

$("#login").submit(function (e) {
    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajax_login_object.ThemeFolder + "/log-in-script.php",
        data: {
            'user_login': user_login,
                'user_pass': user_pass,
                'action': 'login'
        },
        success: function (data) {
            if (data.succeeded == true) {
                // JUST WANT TO SUBMIT THE FORM HERE
                // tried return true.. no joy
                // tried $("#login").submit() but just ends up with neverending loop
                // tried document.href etc but lose the POST data
                // tried nesting another ajax call but no joy
                // ????
            }
        }
    });
    e.preventDefault();
});

In my log-in-script.php I check a few things. For instance, if they haven't filled in the Password field but their Username is in the database I reset their password. If they haven't filled in the Password field and their Username is not in the db then I register them.

If they have entered a Username AND a Password I just want to submit the form normally but I'm struggling on how to do this. I'm sure I'm missing something really simple.

Any help is really appreciated.

Thanks

John ;-)

You need to attach the `ajax()` call to another event, such as a button press, then fire the `submit()` on the form manually. You can see now how you're ending up in a loop. — Rory McCrossan, Sep 13 '13 at 13:20
Why separate this logic from the normal form submit? Also, your password reset logic could potentially be a bad idea.. people simply forget to enter their password, and you could open yourself up to scripts that reset everyone's password.. — Jason P, Sep 13 '13 at 13:23
Rory, could you explain your response a little bit more for me please? What other event could I use to initiate the ajax call? And what do you mean by "fire the submit() on the form manually"? Apologies for my ignorance with this. ;-) — John T, Sep 13 '13 at 13:43
That's exactly what I'd done wrong @chumkiu apologies for the confusion. It's been a long day!! Thank you so much for your help. ;-) — John T, Sep 13 '13 at 13:57

Luca Rainone · Accepted Answer · 2013-09-13T14:54:21.340

9

try

$("#login")[0].submit()

calling submit() directly on form element, avoid the call of submit event callback

DEMO: http://jsfiddle.net/5Xv5f/1/

UPDATE:

this is true for most browser, and for all Gecko Based applications:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications. In general, it is not guaranteed to be invoked by HTML user agents.

However, there is no word of W3 standard for this.

So if you want be 100% sure, you can do somethig like this:

$("#login").submit(function (e) {

    // submit if already checked
    if($(this).attr("data-checked")) {
          return true;
    }

    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajax_login_object.ThemeFolder + "/log-in-script.php",
        data: {
            'user_login': user_login,
                'user_pass': user_pass,
                'action': 'login'
        },
        success: function (data) {
            if (data.succeeded == true) {
                // JUST WANT TO SUBMIT THE FORM HERE

                // flag as checked
                $("#login").attr("data-checked","1");

                // submit
                $("#login").submit()            
            }
        }
    });
    e.preventDefault();
});

DEMO http://jsfiddle.net/AEJ6S/

edited Sep 13 '13 at 14:54

answered Sep 13 '13 at 13:20

Luca Rainone

16,138
2
38
52

Whether it's called on the jQuery object or the DOM element natively, the event is the same so this won't work. – Rory McCrossan Sep 13 '13 at 13:22
@RoryMcCrossan the event is not triggered (http://jsfiddle.net/5Xv5f/) (or I don't understand the question) – Luca Rainone Sep 13 '13 at 13:33
That works. I was mistakenly using #login (the div that holds the form) instead of #loginform (the actual form). Thank you for all your help Rory and chumkiu ;-) – John T Sep 13 '13 at 13:56
@chumkiu unfortunately I still have a problem with this. The form does submit correctly but it doesn't pass the POST data along with it (I presume it's because the form is 're-submitted' with this method). Is there a way to preserve the POST data too? Thanks once again. ;-) – John T Sep 13 '13 at 15:08
@JohnT POST data should be preserved. The error should be somewhere else. :) (`method="POST"`?) – Luca Rainone Sep 13 '13 at 15:17
@chumkiu thank you (again) I can't see the error but I'll struggle on. Thanks again for all your help. I might need to re-think the whole strategy and just do it the old fashioned way (i.e. no ajax and just a different form to reset password / register etc). :-( – John T Sep 13 '13 at 15:49
+1 - silly fix for something that confused me for a while, cheers – scrowler Oct 10 '13 at 02:22
I've just implemented your "data-checked" snippet in my app but it requires me 2 clicks to submit the form, the first click seems doing nothing. Still not sure why. – DrLightman Feb 03 '16 at 12:18
I've fixed the strange behaviour above by replacing $("#login").submit() with $("#login input[type='submit']").click(). I'm on FF 44. I sure don't like this solution, but at least it works for me. – DrLightman Feb 03 '16 at 13:21
@chumkiu sorry for the delay. I wasn't able to program the thing on fiddle. But I made a couple of test files and uploaded them here: [link](http://www.bancala.it/test-submit/). There is the .submit() version and the .click() version. The submit() requires two clicks to me to submit the form, whilst the click() only one click as expected, both tested in the latest FF and Chrome. – DrLightman Feb 04 '16 at 10:08

jQuery Ajax - how to continue to submit form after checking fields

1 Answers1

Linked