Question

每次我提交表格时，模态结束

 <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>

我尝试过每一个stackoverflow发布的很多东西，但似乎都没有。

尝试过像$（＆＃39;＃shipping＆＃39;）。modal（＆＃39; show＆＃39;）;和e.preventDefault（）;

Answer 1

尝试以下代码段。在表格中我添加了一个目标=＆＃34; _blank＆＃34;这样它就不会影响当前页面。另外，为了确保我添加了一个javascript代码来检查输入的表单数据值是否实际上是通过控制台日志提交的。

＆＃13;

$(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;
  })
});

＆＃13;

<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>

＆＃13;

Answer 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>

提交表格后如何防止模态关闭

2 个答案: