如何在创建表单时禁用按钮并防止重复表单

Question

我正在尝试在从表单提交和转发数据时禁用“提交”按钮。这是为了防止用户在保存输入的初始数据时快速单击按钮时创建多个表单副本。

我尝试的一种方法是在处理提交按钮操作的 JavaScript 函数中添加一个去抖动器。但是，如果用户在 5 秒后继续单击该按钮，则仍会创建副本。

我认为更好的方法是在提交数据时禁用按钮，并向用户指示数据处于保存状态，完成后重新启用按钮。

这里是上下文的 javascript 代码：

setupFormIO: function(submissionFunction) {
    var $this = this;
    var submitFunc = submissionFunction;
    var labelText = "Submit";

    if ($this.projectData && !this.readonly) {
        labelText = "Save";
    }
                       
    var submits = FormioUtils.searchComponents($this.template.components,
        {
            "type": "button"
        }
    );

    if (submits) {
        _.each(submits, function (component) {
            component.label = labelText;
            //
            var timer; 
            if (timer) { 
                clearTimeout(timer); 
            }
            //

            if ($this.readonly) {
                $("#" + component.id + " > button").on("click", function(evt) {
                    evt.stopPropagation();
                    location.assign("/project/ProjectHome.aspx");
                    timer = setTimeout(process, 5000); //
                });
           }
     });
}

Answer 1

在脚本的关键位置添加以下代码，用于处理单击提交按钮期间和之后的操作，有助于创建所需的效果。

beforeSubmit: function (submission, next) {
    const btns = document.querySelectorAll('.btn');

    for (const btn of btns) {
        btn.disabled = true;
    }

    $this.isSubmitting = true;
    console.log("button disabled");


if (submits) {
    _.each(submits, function (component) {                                                                               
        console.log("renabled");

        for (const btn of btns) {
        btn.disabled = false;
        }

        $this.isSubmitting = false;
        console.log("button renabled");
    });
}

但是，这会禁用和启用页面上的每个按钮。最终使用了以下 jquery 方法，因为它专门针对提交按钮。

if (submits) {
    _.each(submits, function (component) {
        $("#" + component.id + " > button").prop('disabled', true);
    });
}

window.axios.post($this.baseUri + '/validate',
    submission.data)
    .then(function (d) {
        next();
    })

    .catch(function (e) {
        var message = "Validation Failed:";
        $this.isSubmitting = false;

        if (submits) {
            _.each(submits, function (component) {
                $("#" + component.id + " > button").prop('disabled', false);                                
        });

还要注意，点击提交按钮后，页面会重新路由到一个摘要页面，以防止再次点击提交按钮。