Question

有人可以帮我找到我需要将此代码放在验证脚本中的位置。

该脚本运行良好，但用户多次单击并且表单多次发送。

我尝试将代码包含在if(valid)行的正下方，但仍无效。

这是我想要包含的代码：

form.submit.disabled = true;
form.submit.value = "Please wait...";

这是剧本：

<script type="text/javascript">
    $(document).ready(function (e){
    $("#nominateForm").on('submit',(function(e){
        e.preventDefault();
        var valid;  
        valid = validateContact();
        if(valid) {
            $.ajax({
            url: "contact_mail.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
            $("#mail-status").html(data);
            },
            error: function(){}             

            });
        }
    }));

    function validateContact() {
        var valid = true;   
        $(".nominateForm").css('background-color','');
        $(".info").html('');

        if(!$("#nominate-name").val()) {
            $("#nominateName-error").html("Please enter a name of who you would like to nominate");
            valid = false;
        }

        return valid;
    }

    });
    </script>

Answer 1

您应该将这两个lins放在if条件中，并且在成功调用之后，您应该将它们重新设置为默认值。访问提交按钮属性的正确方法如下所示，

$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').prop('value', 'Please wait...');

或id等于mySubmitBtn

$('#mySubmitBtn').prop('disabled', true);
$('#mySubmitBtn').prop('value', 'Please wait...');

所以你的代码应该是，

if(valid) {
    $('input[type="submit"]').prop('disabled', true);
    $('input[type="submit"]').prop('value', 'Please wait...');
    $.ajax({
    url: "contact_mail.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
        $("#mail-status").html(data);
        $('input[type="submit"]').prop('disabled', false);
        $('input[type="submit"]').prop('value', 'Submit');
    },
    error: function(){}             
    });
}

Answer 2

您可以添加一个HTML元素，其中包含＆＃39; processing＆＃39;如果正在处理，则跳过该功能。

<script type="text/javascript">
        $(document).ready(function (e){
        $("#nominateForm").on('submit',(function(e){
            var status = document.getElementById('someHTMLElement');
            if (status.innerHTML != 'processing') {
                 status.innerHTML = 'processing';
                 e.preventDefault();
                 var valid;  
                 valid = validateContact();
                 if(valid) {
                     $.ajax({
                     url: "contact_mail.php",
                     type: "POST",
                     data:  new FormData(this),
                     contentType: false,
                     cache: false,
                     processData:false,
                     success: function(data){
                     $("#mail-status").html(data);
                     },
                     error: function(){}             

                     });
                 }
                 status.innerHTML = '';
            }
        }));

        function validateContact() {
            var valid = true;   
            $(".nominateForm").css('background-color','');
            $(".info").html('');

            if(!$("#nominate-name").val()) {
                $("#nominateName-error").html("Please enter a name of who you would like to nominate");
                valid = false;
            }

            return valid;
        }

        });
        </script>

通过验证防止多个表单提交

2 个答案: