Форма отправляется несколько раз

Question

Я использую тему Wordpress, которая, к сожалению, дублирует заголовок HTML для настольных компьютеров, мобильных устройств и планшетов. В результате форма входа, которая у меня есть, кажется, отправляется несколько раз, хотя «Вход» нажимается только один раз.

Вот HTML для формы:

                <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>

Вот соответствующие 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();

            }

        });
    };
   };

Проблема в том, что на странице есть 3 повторяющихся формы HTML (из которых только 1 видна пользователю), функция SubmitValidationForm вызывается 3 раза каждый время. Проблема проявляется, когда отправлен действительный логин, но через несколько секунд окно с ошибкой по-прежнему появляется с сообщением о недопустимом адресе электронной почты (даже если логин действительно правильный, и пользователь автоматически перенаправляется в клиентскую область). Эта ошибка, по-видимому, вызвана тем фактом, что функция SubmitValidationForm вызывается 2 раза подряд после первой `` действительной '' отправки, что заставляет ее думать, что она недействительна, когда это не так ... интересно, что это не похоже на другие повторяющиеся формы в HTML, поскольку атрибут идентификатора формы, который я показываю в консоли браузера, показывает только отправляемую «действительную» форму (хотя и несколько раз - возможно, из-за jquery .on () для каждой функции).

Есть идеи, как исправить?

Спасибо!

Answer 1

Я разобрался в проблеме. Если кто-то еще смотрит на это в будущем, проблема связана с функцией «on», раньше она ссылалась на «документ», а не на «это». Поэтому его следует изменить на:

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