Intercept form, add data, ajax, then submit.

Question

I'd like to intercept a form submission, ajax it to one location and then post the form. Below is my attempt with my failures commented out. Any insight into where I'm going wrong would be appreciated, as always.

A note into why I'm doing what I'm doing: I would like to store a complete copy of the form, HTML and all, but still process selected fields as a typical form submit. My ajax saves the HTML as intended, but stops the form submission. Removing the preventDefault() causes the form to submit before the ajax is successful.

$('#myForm').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: '../../lib/processCompleted.php',
        cache: false,
        dataType: 'text',
        data: { PracticeID: PracticeID },

        success: function (data) {
            alert('success');
            // I would then like to submit the form as usual.
            //return true; 
            //$('#myForm').submit();
        },
        error: function () {
            alert('boo');
        }
    });
});

Cheers

Since javascript is obviously available to you, you really ought to just do the "regular" submission with ajax. In fact, it would be just one call to the server, during which you could save the html AND the data. That's just a much better user experience. — m59, Nov 21 '13 at 01:25
@m59 Yeah, that's what I've decided to do. Still unfortunate that I can't get it to work though, because I could foresee future circumstances what would necessitate a similar process. — emsoff, Nov 21 '13 at 16:57

score 2 · Answer 1 · answered Nov 21 '13 at 00:53

2

when you call $('#myForm').submit(); again the submit handler will get called which will prevent the form submission. In this case creating a infinite loop of the ajax requests.

Try

$('#myForm')[0].submit();

Demo: Fiddle

answered Nov 21 '13 at 00:53

Arun P Johny

384,651
66
527
531

I do get a 'success' in my console log, but it's preceded by "$(...)[0].submit is not a function" and fails to submit. – emsoff Nov 21 '13 at 01:03
@jboneca do you have an element with name/id `submit`, if so change the id/name, demo: http://jsfiddle.net/arunpjohny/GxLRq/2/ – Arun P Johny Nov 21 '13 at 01:14
The submit button was named submit, but changing that name to something else didn't have an effect. Thanks anyway! – emsoff Nov 21 '13 at 16:55
@jboneca can you share the relevant html... again somebody is overriding the `submit` value – Arun P Johny Nov 21 '13 at 16:59

Intercept form, add data, ajax, then submit.

1 Answers1

Linked