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

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);                                
        });

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

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

How to disable button while form is being created and to prevent duplicate form

javascript

formio