如何将打开模态框与提交表单的两个按钮合并为一个？

现有两个按钮，一个点击后打开模态框，另一个点击后提交表单数据，代码片段如下：

htmlString += "             <button type=\"button\" class=\"btn-link border-0 cancel-btn-v1\" data-bs-toggle=\"modal\" data-bs-target=\"#cancelSubscription_" + rowInd + "\" onclick=\"openModalPauseAtClickCoordinate(this)\">" + TITLES.BUTTONS.CANCEL_SUBSCRIPTION + "</button>";

htmlString += "<a href=\"javascript:void(0);\" class=\"btn btn-primary btn-sm\" onclick=\"var data = {};data.unsubscribe = 'T';var value = JSON.stringify(data); nlapiSetFieldValue('custpage_newfield', value); document.getElementById('main_form').submit();\">" + TITLES.BUTTONS.SUBMIT + "</a>";

需要将这两个按钮的功能合并到一个按钮中，实现点击一次同时完成打开模态框和提交表单的操作。

实现方案 #

直接把两个按钮的逻辑合并到一个按钮里即可，具体代码如下：

htmlString += "             <button type=\"button\" class=\"btn-link border-0 cancel-btn-v1 btn-primary btn-sm\" data-bs-toggle=\"modal\" data-bs-target=\"#cancelSubscription_" + rowInd + "\" onclick=\"openModalPauseAtClickCoordinate(this); var data = {};data.unsubscribe = 'T';var value = JSON.stringify(data); nlapiSetFieldValue('custpage_newfield', value); document.getElementById('main_form').submit();\">" + TITLES.BUTTONS.CANCEL_SUBSCRIPTION + "</button>";

关键细节说明： #

• 保留原模态框按钮的data-bs-toggle和data-bs-target属性，确保模态框能正常触发弹出
• 将提交表单的JS逻辑直接追加到按钮的onclick事件中，用分号分隔两个逻辑块，点击时会依次执行
• 样式类按需合并，这里把两个按钮的样式都整合了，你也可以根据UI需求调整成单一风格
• 按钮显示的文字可自选，想用原取消按钮文案就保留TITLES.BUTTONS.CANCEL_SUBSCRIPTION，想用提交按钮文案就替换成TITLES.BUTTONS.SUBMIT

内容的提问来源于stack exchange，提问作者Pallavi Ashok Gadade