Question

我有一个函数，可以从同一按钮监听click并形成submit并按以下方式提交PUT请求：

按钮：

<input type="submit" id="amendProj" placeholder="45" class="btn btn-dark" value="Save Changes">

功能：

// PUT amend project function
$(document).on('click', '#amendProj', function () {

    // fetch clicked button placeholder value
    var fired_button = $(this).attr('placeholder');

    // await default validation before form submission
    $(document).on("submit", "#collapse" + fired_button, function (e) {

        e.preventDefault();

        // show loading spinner
        document.getElementById("spinner").hidden = false;

        //collect form data
        var params = {

        projectId: fired_button,
        projectManager: $("#selectionMan" + fired_button + " option:selected").text(),
        projectOwner: $("#selectionOwn" + fired_button + " option:selected").text(),
        predictedLaunch: document.querySelector('#preDate' + fired_button).value,
        actualLaunch: document.querySelector('#actDate' + fired_button).value,
        predictedCompletion: document.querySelector('#precomDate' + fired_button).value,
        actualCompletion: document.querySelector('#actcomDate' + fired_button).value,
        predictedCost: document.querySelector('#preCost' + fired_button).value,
        actualCost: document.querySelector('#actCost' + fired_button).value,
        price: document.querySelector('#charge' + fired_button).value,
        projectTitle: document.querySelector('#projTitle' + fired_button).value,
        projectDescription: document.querySelector('#projDescribe' + fired_button).value,
        requestor: document.querySelector('#projRequestor' + fired_button).value,
        requestorEmail: document.querySelector('#requestorEmail' + fired_button).value,
        requestorTel: document.querySelector('#requestorTel' + fired_button).value,
        status: $("#projStatus" + fired_button + " option:selected").text()
        }

        // Create XHR Object and send
        var xhr = new XMLHttpRequest();
        xhr.open('PUT', 'http://link/resource/api/Projects/' + fired_button, true)
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.send(JSON.stringify(params));

        // Handle errors
        xhr.onload = function () {

            if (this.status == 204) {

                // hide loading spinner
                document.getElementById("spinner").hidden = true;
                alert("Changes saved successfully!");
                console.log(this.status + ' Changes submitted successfully!');

            }

            else  {

                // hide loading spinner
                document.getElementById("spinner").hidden = true;
                alert("Your submission failed. Please try again");
            }
        }
    });

});

现在，我已经使用required进行了默认HTML验证。当我将字段保留为空白并单击按钮时，浏览器将响应并显示默认验证消息。我更正了我的输入，再次单击该按钮，我的功能被执行两次甚至更多，这取决于我通过验证的次数失败。因此，按照我的代码，这将导致警报框在成功执行后显示两次或多次。如何重构代码，这样就不会发生这种情况？我是jquery和js的新手，所以可能会缺少一些东西。

感觉就像当我一次验证失败时，该功能仍在运行并等待执行。当我在更正错误后再次单击该按钮提交时，它显然会再次调用该函数并与未完成执行的函数一起执行，因为验证未成功。真的感谢专家是否能伸出援手，谢谢。

Answer 1

似乎您每次单击都在塌陷45中添加一个提交处理程序。您可以通过添加以下行来清除任何现有处理程序：

$(document).off("submit", "#collapse" + fired_button);

在行之前：

$(document).on("submit", "#collapse" + fired_button...etc

不知道这是否是最好的解决方案，但它应该可以工作

如何正确地将单击的按钮属性值传递给表单提交事件？

1 个答案: