0

I have been trying to add two users (one at a time) and then pay using stripe. I originally thought the problem lied in the fact that ajax is asynchronous, posting both user forms at the same time, but I now believe it is because when I get the response from the operation, the ajax operation is considered completed and it moves onto the other operations.

The response has the validation errors with it and I am using a jQuery function that adds the errors to the form and that form doesn't get submitted until the errors are fixed.

This is a major issue because the two users are to be linked by a group_id that is the same value as the id of the primary user (user #1). If user #1 had validation errors and user #2 doesn't, user #2 gets added and therefore cannot be linked to user #1's id value since it doesn't exist yet.

I can do a work around with a hidden form field on each user form that has matching values for group_id and then update the data once user #1 gets added, but I would love to be able to check the response for errors before the ajax operation is completed. Is there any way to do this?

My Ajax function:

function submitFormAjax(formData) {
    if (formData.length) {
        var formId = formData.attr('id');
        if ( $('#'+formId ).hasClass('disabled') ) {
            console.log('form is disabled don\'t post data');
        } else {
            return $.ajax({
                type: formData.attr('method'),
                url: formData.attr('action'),
                data: formData.serialize(),
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                }
            })
            .done( function( data ) {
                addFormErrors(formId, data);
            })
            .fail(function( data ) {
                console.log('user\(s\) could not be added');
                console.log( data );
            });
        }
    }
}

Submitting Forms Function:

function submitAllForms() {
    // wait until both of the other forms' data are submitted
    $.when( submitFormAjax($('#userForm')), submitFormAjax($('#secondUserForm')) ).then(
        function() {
            if ( $('.error-message').length ) {
                $form.find('button').prop('disabled', false);
            } else {
                $('#payment-form').get(0).submit();
            }
    });
}

I don't believe you need to see the function where it adds the errors as that functionality works fine. Just know that they are added with the addFormErrors() function.

Battousai
  • 503
  • 7
  • 17
  • Why not wait to submit the second form until the .done function for the first one? – Greg Schmidt Dec 10 '15 at 18:39
  • Meaning place the second ajax function inside the done callback of the first ajax function? – Battousai Dec 11 '15 at 16:49
  • Exactly. Seems to me that it would simplify the process. It would entirely eliminate any issue that might arise if the first fails and the second succeeds, because in that case you never would have started the second, and it lets you deal gracefully with it if the first succeeds and the second fails (e.g. you might launch another Ajax request to undo the first operation, if that's important). – Greg Schmidt Dec 11 '15 at 20:04

0 Answers0