javascript - 对于位于 Bootstrap 模式中的表单，提交按钮应位于何处？

Question

下面是直接来自文档的示例 HTML，除了我id在表单元素中添加了一个。为什么他们在表单之外显示按钮？它们不应该位于表单中，以便在单击时提交表单吗？请在底部查看我的典型 JavaScript。如果没有，是否需要将事件附加到button.btn-primary将提交表单的事件，或者甚至不使用此事件而只在单击主按钮事件中完成工作？

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="my-form">
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

我的典型 JS 如下所示：

const form = document.getElementById( "my-form" );
form.addEventListener( "submit", function ( event ) {
    event.preventDefault();
    // Make a XMLHttpRequest as necessary
} );

标签： javascriptformstwitter-bootstrapbootstrap-modal

Answer 1

该button元素有一个可选form属性，用于将其与form. 这允许button将 定位在任何地方，不一定在form元素内部。在可能需要不同提交参数的情况下，它还允许多个button元素与单个元素相关联。form