如何在提交表单时,弹出确认框

2024-04-28 09:12:58

要在提交表单时弹出确认框,您可以使用 JavaScript 来实现。以下是一个简单的示例代码,演示如何在提交表单时弹出确认框:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirm Form Submission</title>
</head>
<body>

<!-- 表单 -->
<form id="myForm" action="submit.php" method="post" onsubmit="return confirmSubmit()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <input type="submit" value="Submit">
</form>

<script>
function confirmSubmit() {
    // 弹出确认框
    if (confirm("Are you sure you want to submit the form?")) {
        return true; // 用户点击确认,继续提交表单
    } else {
        return false; // 用户点击取消,阻止提交表单
    }
}
</script>

</body>
</html>

在上面的示例中,我们使用了 onsubmit 事件来触发确认框。当用户点击提交按钮时,confirmSubmit() 函数将被调用,弹出确认框询问用户是否确定要提交表单。如果用户点击确认,则返回 true 继续提交表单,否则返回 false 阻止提交表单。

您可以将以上代码保存为一个 HTML 文件,在浏览器中打开并测试提交表单时弹出确认框的效果。这样用户在提交表单前会看到一个确认提示框。