提交表单后如何防止模式关闭

Posted 2023-05-08

【中文标题】提交表单后如何防止模式关闭

【英文标题】：How to prevent the modal from closing after submitting form

【发布时间】：2018-08-20 01:46:14

【问题描述】：

每次我提交表单时，模态框都会关闭

 <div class="modal fade" id="shipping" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h1 id= "modalHeader" class="modal-title"></h1>
            </div>
            <div align="center" id="imageinfo" class="modal-body">
              <div>
                         <h3 id= "modalHeader"><strong>Shipping Information</strong></h3>
                            <br />

                            <form action="index.php" method="post">
                                <label><b>First Name</b></label>
                                <br />
                                <input type="text" placeholder="Enter First Name" name="fname" required>
                                <br /><br />
                                <label><b>Last Name</b></label>
                                <br />
                                <input type="text" placeholder="Enter Last Name" name="lname" required>
                                <br /><br />
                                <label><b>Address</b></label>
                                <input type="address" placeholder="Enter Address" name="address" required> 
                                <br />
                            <div class="modal-footer">
                            <input type="submit" class="btn btn-default" value="Confirm Address" data-dismiss="static">
                            <button type="submit" class="btn btn-default invoice" data-dismiss="modal">Final Invoice</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                            </form>
              </div>
            </div>
          </div>
        </div>
      </div>

我尝试了很多东西，每一个 *** 都会发布，但它们似乎都不起作用。

尝试过 $('#shipping').modal('show'); 之类的东西和 e.preventDefault();

【问题讨论】：

你试过什么？你能把它包括在问题中吗？你试过使用ajax 吗？

诸如 $('#shipping').modal('show') 和 e.preventDefault(); 之类的东西；

您使用的是哪个引导程序版本？

提交表单后刷新页面？

@LakinduGunasekara 3 是的，它刷新了

【参考方案1】：

试试下面的 sn-p。在表单中，我添加了一个 target="_blank"，这样它就不会影响当前页面。还只是为了确保我添加了一个 javascript 代码来检查输入的表单数据值是否实际上是通过控制台日志提交的。

$(document).ready(function() 
  $("form").submit(function() 
    Fname = $("input[name='fname']").val();
    Lname = $("input[name='lname']").val();
    Address = $("input[name='address']").val();

    console.log("First Name " + Fname);
    console.log("Last Name " + Lname);
    console.log("Address " + Address);

    return false;
  )
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#shipping">
  Launch demo modal
</button>

<div class="modal fade" id="shipping" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h1 id="modalHeader" class="modal-title"></h1>
      </div>
      <div align="center" id="imageinfo" class="modal-body">
        <div>
          <h3 id="modalHeader"><strong>Shipping Information</strong></h3>
          <br />

          <form action="index.php" target="_blank" method="post">
            <label><b>First Name</b></label>
            <br />
            <input type="text" placeholder="Enter First Name" name="fname" required>
            <br /><br />
            <label><b>Last Name</b></label>
            <br />
            <input type="text" placeholder="Enter Last Name" name="lname" required>
            <br /><br />
            <label><b>Address</b></label>
            <input type="address" placeholder="Enter Address" name="address" required>
            <br />
            <div class="modal-footer">
              <input type="submit" class="btn btn-default" value="Confirm Address" data-dismiss="static">
              <button class="btn btn-default invoice">Final Invoice</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

当我添加目标时，模态仍然关闭

你试过运行我的 sn-p 吗？

在我的 sn-p 中，模态不会关闭。因此，如果该代码不适用于您的项目，则应该有其他一些影响它的依赖项

你的答案有效，我的 php 有问题，谢谢！

【参考方案2】：

你可以这样做......

 <div class="modal fade" id="shipping" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h1 id= "modalHeader" class="modal-title"></h1>
            </div>
            <div align="center" id="imageinfo" class="modal-body">
              <div>
                <h3 id= "modalHeader"><strong>Shipping Information</strong></h3>
                <br /> 
                  <form action="index.php" method="post">
                    <label><b>First Name</b></label>
                    <br />
                    <input type="text" placeholder="Enter First Name" name="fname" required>
                    <br /><br />
                    <label><b>Last Name</b></label>
                    <br />
                    <input type="text" placeholder="Enter Last Name" name="lname" required>
                    <br /><br />
                    <label><b>Address</b></label>
                    <br />
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-default" value="Confirm Address" data-dismiss="static">
                      <button type="submit" class="btn btn-default invoice" data-dismiss="modal">Final Invoice</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </form>
              </div>
            </div>
          </div>
        </div>
      </div>