Question

我在我的MVC项目中使用web api，我遇到了一个问题，如果用户在创建页面上..填写表单...并点击提交..在处理时间内，用户是能够连续点击多个创作的提交按钮。

我的目标

仅允许用户提交一次表单。基本上，用户点击后，或点击键盘上的输入或用户提交表格..它应该只允许一次。

我研究过this。

我该如何实现呢？以下是我到目前为止的情况：

<input id="Edit-Btn-Submit" type="submit" value="Save" class="btn btn-primary" />

$("form").data("validator").settings.submitHandler =
    function(form) {

        $.ajax({
            method: "PUT",
            url: infoGetUrl + itemId,
            data: $("form").serialize(),
            beforeSend: function() {
                disableSendButton();
            },
            complete: function() {
                enableSendButton();
            },
            success: function() {
                toastr.options = {
                    onHidden: function() {
                        window.location.href = newUrl;
                    },
                    timeOut: 3000
                }
                toastr.success("Equipment successfully edited.");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                var status = capitalizeFirstLetter(textStatus);
                var error = $.parseJSON(jqXHR.responseText);
                //console.log(error);
                var modelState = error.modelState;
                //console.log(error.modelState);
                $.each(modelState,
                    function(key, value) {
                        var id = "";
                        if (key === "$id") {
                            id = "#" +
                                key.replace('$', '').substr(0, 1).toUpperCase() +
                                key.substr(2);
                        } else {
                            id = "#" +
                                key.replace('$', '').substr(0, 1).toUpperCase() +
                                key.substr(1);
                            var status = capitalizeFirstLetter(textStatus);
                            toastr.error(status + " - " + modelState[key]);
                        }
                        var input = $(id);
                        console.log(id); // result is #id
                        if (input) { // if element exists
                            input.addClass('input-validation-error');
                        }
                    });
            }
        });
    }

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function disableSendButton() {
    $('#Edit-Btn-Submit').prop('disabled', true);
}

function enableSendButton() {
    $('#Edit-Btn-Submit').prop('disabled', false);
}
});

感谢任何帮助。

Answer 1

我解决问题的方法是在请求完成之前禁用按钮。这可以防止用户发送垃圾邮件。你也可以选择做其他事情，而不是像隐藏它或其他任何东西一样。

下面的代码应该在ajax请求启动时禁用该按钮，并在它结束后重新启用它（成功或失败，无关紧要）。

您可以参考this page以获取有关使用JQuery Ajax对象触发/可访问的事件和句柄的更多信息。

CGFloat

Answer 2

您可以在使用＆＃34; beforeSend＆＃34;事件，然后启用它成功＆＃34;事件

$.ajax({
   method: "PUT",
   url: infoGetUrl + itemId,
   data: $("form").serialize(),
   beforeSend: function() {
      $('#buttonId').prop('disabled', true);
   },
   success: function() {
      $('#buttonId').prop('disabled', false);
      //some code here
   },
   error: function(jqXHR, textStatus, errorThrown) {
      alert("Error during communication with the service, try later");
      $('#buttonId').prop('disabled', false);
      //some other code
   }
});

仅限Web Api允许提交表单一次

2 个答案: