首页  >  文章  >  web前端  >  如何实现带有提交和取消选项的 JavaScript 表单提交确认对话框?

如何实现带有提交和取消选项的 JavaScript 表单提交确认对话框?

Patricia Arquette
Patricia Arquette原创
2024-10-31 08:15:30611浏览

How Can I Implement a JavaScript Form Submission Confirmation Dialog with Submit and Cancel Options?

JavaScript 表单提交:带有提交和取消选项的确认对话框

使用内联 JavaScript 确认对话框

实现带有选项的表单提交确认对话框要提交或取消,您可以使用内联 JavaScript 确认对话框。此对话框显示一条弹出消息,提示用户确认表单提交,并提供两个按钮:“确定”和“取消”。

要使用内联 JavaScript 确认对话框,请将以下代码添加到 HTML form:

<code class="html"><form onsubmit="return confirm('Do you really want to submit the form?');"></code>

使用外部函数进行验证和确认

如果您需要在提示用户确认之前执行额外的验证,您可以创建一个外部 JavaScript 函数来进行验证和确认确认。操作方法如下:

  1. 创建一个执行验证并返回布尔值的 JavaScript 函数(true 表示有效,false 表示无效)。
<code class="javascript">function validate(form) {

    // Validation code here ...

    if (!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}</code>
  1. 将该函数添加到 HTML 表单的 onsubmit 事件处理程序中。
<code class="html"><form onsubmit="return validate(this);"></code>

自定义确认对话框

您可以使用消息和按钮自定义确认对话框的消息和按钮标签确认()函数中的选项。例如:

<code class="javascript">confirm({
  message: 'Are you sure you want to continue?',
  buttons: ['Yes', 'No', 'Cancel']
});</code>

以上是如何实现带有提交和取消选项的 JavaScript 表单提交确认对话框?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn