首頁  >  文章  >  web前端  >  如何實現帶有提交和取消選項的 JavaScript 表單提交確認對話框?

如何實現帶有提交和取消選項的 JavaScript 表單提交確認對話框?

Patricia Arquette
Patricia Arquette原創
2024-10-31 08:15:30613瀏覽

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