javascript - 表单提交多次

问题描述

我正在使用一个 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();

            }

        });
    };
   };

问题是因为页面 HTML 上有 3 个重复的表单（只有 1 个对用户可见），SubmitValidationForm 函数每次调用 3 次。当提交了有效的登录时，该问题会很明显，但几秒钟后错误框仍然显示无效电子邮件（即使登录实际上是正确的并且用户会自动正确地重定向到客户区）。这个错误似乎是由于 SubmitValidationForm 函数在第一次“有效”提交之后被调用 2 次，这使得它认为它是无效的，当它不是......有趣的是它似乎不是由其他重复表单引起的在 HTML 中，因为我在浏览器控制台中显示的表单 ID 属性仅显示“有效”

任何想法如何解决？

谢谢！

标签： javascriptjquerywordpress

javascript - 表单提交多次

问题描述

解决方案

推荐阅读