Question

I have a form.submit that fires multiple times. The first time, it’s fine. After I get the response back, if I click the submit button again, it fires twice. Then thrice. Seems like each time the response comes back, the submit fires an extra time the next time the button is clicked.

RetrievePassword = function () {
    var $popup = $("#fancybox-outer");
    var form = $popup.find("form");
    form.submit(function (e) {
        var data = form.serialize();
        var url = form.attr('action');
        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            success: function (response) {
                if (response.Success) {
                    $.fancybox.close();
                }

                alert(response.Message);
            },
            error: function (xhr, status, error) {
                alert(xhr.statusText);
            }
        });

        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        return false;
    });

};

I’m not even sure how to debug this. Any advice is appreciated…

Answer 1

I assume you are calling RetrievePassword() multiple times. Everytime you call it another onsubmit handler will be registered.

The solution is to register the handler only once.