HTML5Dialog实现模态框教程

如何在 Dialog 中处理表单提交？

在对话框中处理表单提交需要一些额外的注意。默认情况下，表单提交会导致页面刷新，这可能不是你想要的行为。

一种常见的做法是使用 JavaScript 阻止表单的默认提交行为，并使用 AJAX 将表单数据发送到服务器。

<dialog id="myFormDialog">
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>
    <button type="submit">提交</button>
    <button type="button" id="cancelBtn">取消</button>
  </form>
</dialog>

<button id="openFormBtn">打开表单对话框</button>

<script>
  const formDialog = document.getElementById('myFormDialog');
  const openFormBtn = document.getElementById('openFormBtn');
  const myForm = document.getElementById('myForm');
  const cancelBtn = document.getElementById('cancelBtn');

  openFormBtn.addEventListener('click', () => {
    formDialog.showModal();
  });

  myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止默认提交行为

    const formData = new FormData(myForm);

    fetch('/your-api-endpoint', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      // 处理响应
      console.log('提交成功！');
      formDialog.close();
    })
    .catch(error => {
      // 处理错误
      console.error('提交失败：', error);
    });
  });

  cancelBtn.addEventListener('click', () => {
    formDialog.close();
  });
</script>

在这个例子中，我们监听了表单的 submit 事件，并调用 event.preventDefault() 来阻止默认的提交行为。然后，我们使用 FormData 对象获取表单数据，并使用 fetch API 将数据发送到服务器。

取消按钮也需要单独处理，确保关闭对话框的同时，不会触发表单提交。

如何优雅地处理 Dialog 的兼容性问题？

虽然

npm install dialog-polyfill

import dialogPolyfill from 'dialog-polyfill';

const dialog = document.querySelector('dialog');

if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}