Question

I have code that gets called whenever the form is submitted, this then validates the form via ajax. Now if the validation is successful, how do I submit the form

$('#homeSubscriptionFromSub').submit(function(){    
                var formData = $(this).serialize();
                var formUrl = '/subscriptions/subscribe';

                $.ajax({
                        type: 'POST',
                        url: formUrl,
                        data: formData,
                        success: function(data,textStatus,xhr){
                                if(data == ''){
                                    return true;
                                }else{
                                    $("#subscriptionForm").html(data);
                                }
                        },
                        error: function(xhr,textStatus,error){
                                alert(textStatus);
                        }
                });
                return false;
            });

What I do in the above code, I validate the form server side, now when data is empty it means that it passed the validation test, how can I submit the form when data is empty, I tried return true but this is not working

Answer 1

The AJAX call is asynchroneous. Use the submit() method (without arguments) to submit the form. Also, I recommend to use event.preventDefault() to cancel a form submissipn beforehand.

To not cancel your new request by the same function, a variable is created, to keep track whether the form is valid or not.

(function(){
    var valid = false;
    $('#homeSubscriptionFromSub').submit(function(e){    
        if(valid){
            valid = false;
            return; //Don't prevent default
        }
        e.preventDefault();
        var formData = $(this).serialize();
        var formUrl = '/subscriptions/subscribe';

        $.ajax({
                type: 'POST',
                url: formUrl,
                data: formData,
                success: function(data,textStatus,xhr){
                        if(data == ''){
                            valid = true;
                            $('#homeSubscriptionFromSub').submit();
                        }else{
                            $("#subscriptionForm").html(data);
                        }
                },
                error: function(xhr,textStatus,error){
                        alert(textStatus);
                }
        });
        return false;
    });
})();