如何在 html 表單中保持引導模式？

Question

我試圖從模態輸入中獲取數據並提交到數據庫中。 表單也有不在模式內的輸入字段。 我在表單內寫了模態，但它一直在外面（我在檢查元素中觀看），所以我無法獲得這些數據。 我有機會讓它工作嗎？

偽代碼：

<form>
<label>Name</label>
<input type="text" name="Name" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Check students</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <input type="checkbox" name="students[]" value="student1">
        <input type="checkbox" name="students[]" value="student2">
        <input type="checkbox" name="students[]" value="student3">
        <input type="checkbox" name="students[]" value="student4">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
<!-- END MODAL -->

<button type="submit" class="btn btn-primary" id="main-btn">Create</button>
</form>

Answer 1

您應該在模態之前保持標簽的打開和關閉狀態。

<form id="myForm1">
<label>Name</label>
<input type="text" name="Name" />
</form>

然后，將attibute表單添加到模態內的每個輸入。

<input form="myForm1" type="checkbox" name="students[]" value="student1">

不要忘記提交按鈕

[...]
<!-- END MODAL -->
<button type="submit" form="myForm1"  class="btn btn-primary" id="main-btn">Create</button>

Answer 2

表單內的任何按鈕都將自動被視為“提交”按鈕

如果按鈕是提交按鈕（它在內部/與 a 相關聯並且沒有 type="button"），則指定如何對提交的表單數據進行編碼。

所以我只是在打開模式的按鈕中添加了type="button"並停止提交表單。

關於上述答案 - 在我的情況下，模態已經在<form>之外......所以我知道這不適合我。