Form submits multiple times

Question

I am using a Wordpress theme that unfortunately is duplicating the header HTML for desktop, mobile and tablet. As a result, a login form I have appears to be submitting multiple times even though "Login" is only clicked once.

Here is the HTML for the form:

                <div id="user-login">
    <div class="com_row">
                    <div class="com_panel_body">
                        <div id="error_message91" class="com_alert com_alert_danger" style="display: none;">
                        </div>

                        <form method="post" id="validation_form83">
                            <input type="hidden" name="login_form_flag" value="1">
                            <div class="login-username">
                                <label for="email" class="main_label">Email Address</label>
                                <input id="email68" type="email" name="email" required="required">
                            </div>

                            <div class="login-password">
                                <label for="password" class="main_label">Password:</label>
                                <input id="password82" type="password" name="password" required="required">
                            </div>
                <ul class="login-links" style="margin-top:-30px"><li><a href="/password_reset" style="color:#39b54a">Forgot Password?</a></li></ul>

                            <div class="login-submit" style="margin-top:-20px">
                                <input type="submit" value="Login"></div>
                <div style="padding-top:20px"><a class="button green small borderd-bot" href="/client_account">Register</a></div>
                     </form>
                    </div>
                </div>

                </div>

Here is the relevant JS:

$("[id^='validation_form']").each(function(i) {
//necessary because there are 3 form duplicates on the page, so this button works on all
    jQuery(document).on("submit", this, SubmitValidationForm);
});

function($) {
SubmitValidationForm = function (event)  {
    event.preventDefault();

    var formk = "#"+event.target.id;

            var k = $(formk).serialize();
        k += "&action=wcap_requests&what=validate_login";

    jQuery("input[type=email]",formk).prop("disabled", true);
        jQuery("input[type=password]",formk).prop("disabled", true);
        jQuery("input[type=submit]",formk).prop("disabled", true).val(WCAP_Working_text);

    var childf = $(formk).closest('div','.com_alert').children( ".com_alert");      

    $(childf).hide();
        var login_form_flag = jQuery("input[name=login_form_flag]",formk).val();

        jQuery.post(wcap_ajaxurl, k, function (data) {

            data = JSON.parse(data);
            console.log(data);
            if (data.status === "OK") {
                //== if client login through wcap login form
                if (login_form_flag === '1'){
                    window.location.href = client_area_url;
                }
                else {
                    if (redirect_login !== "0") {
                        window.location.href = redirect_login;
                    } else {
                        window.location.reload();
                    }
                }
            }
            else {
                jQuery("input[type=email]",formk).prop("disabled", false);
                jQuery("input[type=password]",formk).prop("disabled", false);
                jQuery("input[type=submit]",formk).prop("disabled", false).val('Login');

        $(childf).html(data.message).show();

            }

        });
    };
   };

The problem is because there are 3 duplicate forms on the page HTML (with only 1 visible to the user), the SubmitValidationForm function is called 3 times every time. The issue is pronounced when there is a valid login submitted, but the error box still appears saying invalid email after a few seconds (even though the login is actually correct and the user gets automatically redirected properly to the client area ). This error seems caused by the fact the SubmitValidationForm function is called 2 subsequent times after the first 'valid' submission which makes it think it's invalid, when it's not... the interesting thing is it doesn't seem caused by the other duplicate forms in the HTML, as the form ID attribute that I display in browser console shows only the 'valid' form being submitted (albeit multiple times -- perhaps because of the jquery.on() for each function).

Any ideas how to fix?

Thanks!

Answer 1

I figured out the issue. If anyone else is looking at this in future the issue was with respect to the 'on' function, it was referencing the 'document' before instead of 'this'. So it should be changed to:

$("[id^='validation_form']").each(function(i) {
    jQuery(this).on("submit", this, SubmitValidationForm);
});