无法制作输入标签以提交表单并打开 BootStrap 模态

Question

我需要向我的 servlet 提交一个表单，同时在我的 .jsp 文件中打开一个带有输入标签的 BootStrap 模式。但是，如果我将输入标记类型设置为“按钮”，则无法将表单提交到我的 servlet。如果我将类型设置为“提交”，则 BootStrap 模式不起作用。我可以一键完成这两个功能吗？

谢谢！

<FORM METHOD="post" ACTION="<%=request.getContextPath()%>/PostController" id="getOneForUpdateForm"> 
<input class="btn" type="button" data-toggle="modal" data-target="#exampleModal" value="editPost">
<input type="hidden" name="postno" value="${postVO.postno}">
<input type="hidden" name="action" value="getOne_For_Update">
</FORM>

这里是 BootStrap 模式

<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit the Post</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save Changes</button>
  </div>
</div>

Answer 1

html的默认表单提交使页面重新加载， 但是您可以使用 jquery 提交表单并在您的模式打开时保持您的页面处于活动状态。 它被称为 AJAX、异步 JavaScript 和 XML。

所以如果你没有，我建议你包括 jquery，

那么你的表单应该是这样的

<FORM METHOD="post" ACTION="<%=request.getContextPath()%>/PostController" id="getOneForUpdateForm"> 
<input class="btn" type="submit" data-toggle="modal" data-target="#exampleModal" value="editPost">
<input type="hidden" name="postno" value="${postVO.postno}" id="postno">
<input type="hidden" name="action" value="getOne_For_Update" id="action">
</FORM>

然后在你的脚本中

$("#getOneForUpdateForm").on("submit", function(event) {
  event.preventDefault();
  $.post(
    $("#getOneForUpdateForm").action,
    {
      name: $("#postno").val(),
      action: $("#action").val()
    },
    function(data, textStatus, jqXHR) {
      console.log("form submitted");
    }
  );
});