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

Posted 2023-03-05

【中文标题】如何正确地将单击按钮属性值传递给表单提交事件？

【英文标题】：How to properly pass clicked button attribute value to form submit event?

【发布时间】：2019-09-22 19:43:51

【问题描述】：

我有一个函数可以监听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 的新手，所以可能会遗漏一些东西。

感觉就像有一次验证失败时，函数仍在运行并等待执行。当我在纠正我的错误后再次单击按钮提交时，它显然会再次调用该函数并执行加上由于验证不成功而未完成执行的函数。非常感谢专家能伸出援手，谢谢。

【问题讨论】：

看起来您正在为每次点击添加一个提交处理程序以折叠45

如果验证失败，有没有办法取消提交处理程序？

【参考方案1】：

您似乎在每次点击时都向collapse45 添加提交处理程序。 您可以通过添加以下行来清除任何现有处理程序：

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

行前：

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

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