Submitting a form within the submit() event Jquery

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

Rob W · Accepted Answer · 2011-10-26 19:52:43Z

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;
    });
})();

answered Oct 26, 2011 at 19:52

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elitmiar Over a year ago

I tried $(this).submit(); and this did not work, I will try using the id

Rob W Over a year ago

@Roland I have included the full recommended code in my answer. Just calling $(..).submit() will not work, because the function cancels each submit event. This behaviour has to be dealt with, as shown in the suggested code.

user229044 · Accepted Answer · 2011-10-26 19:53:42Z

1

AJAX is asynchronous. Your function will return false; before the $.ajax finishes. You need to do your request synchronously, or trigger the form's submit event when the AJAX function completes.

You will probably have to unbind the validation function first though, or you'll simply wind up recursively validating your form on submit.

answered Oct 26, 2011 at 19:53

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Comments

Michael D. Irizarry · Accepted Answer · 2011-10-26 20:04:00Z

You must return true in order for it to submit, you are returning false since your using ajax.

$('#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);
                                    this.submit();
                                }
                        },
                        error: function(xhr,textStatus,error){
                                alert(textStatus);
                        }
                });
                return false;
            });

Collectives™ on Stack Overflow

Submitting a form within the submit() event Jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related