在表单中执行辅助选项之前进行确认

Confirm before executing secondary option in form

本文关键字：确认 选项 表单 执行      更新时间：2023-09-26

>我有一个表单，用户可以根据他们在表单中选择的按钮选择修改或删除数据库中的记录。如果我将其保留为非此即彼，效果很好，但我想在人们删除文件之前添加确认/警告，以防他们不小心点击了错误的按钮。但是，当我添加确认功能时，如果他们在警告上单击"确定"，则表单将不再执行该操作（它会尝试执行通过单击第一个按钮调用的操作）。如果他们在弹出警告后点击取消，则不会发生任何事情（这是应该的）。但是，如果我删除确认功能，两个按钮都可以正常工作（它只会使某人更有可能不小心点击错误的按钮）。我在这里找到了很多关于如何一键执行操作的问题，但显然我不希望它立即执行，所以这些都没有帮助。

这是我尝试工作的按钮的代码：

 <input type="submit" value="DELETE Selected Rows" onClick="return confirm('WARNING!! You are about to DELETE the selected rows; this action cannot be undone!'); submitForm('delete_record.php');">

但是，如果我只有：

<input type="submit" value="DELETE Selected Rows" onClick="submitForm('delete_record.php')">

它工作正常。

试试这个 

<input type="submit" id="submit-button" value="DELETE Selected Rows" onClick="if (confirm('WARNING!! You are about to DELETE the selected rows; this action cannot be undone!')) { submitForm('delete_record.php'); };">

但是，我建议使用事件绑定而不是使用 onclick-attribute。示例（根据@sparrowhawk87在评论中提供的新信息更新）： 

<script>
document.getElementById("my-form").addEventListener("submit", function(event){
        event.preventDefault();
    if (confirm('WARNING!! You are about to DELETE the selected rows; this action cannot be undone!')) { 
         alert("Execute submitForm() here.");
    };
});
</script>

（请注意，您需要在表单标签中添加一个名为"my-form"的 ID 才能使此示例正常工作。

相关文章：