javascript - How to prevent the modal from closing after submitting form

Everytime I submit the form, the modals closing

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

I tried many things that were posted every one stackoverflow but none of them seem to work.

Tried stuff like $('#shipping').modal('show'); and e.preventDefault();

Everytime I submit the form, the modals closing

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

I tried many things that were posted every one stackoverflow but none of them seem to work.

Tried stuff like $('#shipping').modal('show'); and e.preventDefault();

Share Improve this question edited Mar 12, 2018 at 6:15 asked Mar 12, 2018 at 5:10 Xiong Xu 1412 silver badges11 bronze badges

What have you tried ? Can you include it in the question ? Have you tried using ajax ? – jerome Commented Mar 12, 2018 at 5:12
stuff like $('#shipping').modal('show') and e.preventDefault(); – Xiong Xu Commented Mar 12, 2018 at 5:16
which bootstrap vesion your using? – Lakindu Gunasekara Commented Mar 12, 2018 at 5:24
After submitting form your page refresh? – Rohit Verma Commented Mar 12, 2018 at 5:24
@LakinduGunasekara 3 and yes it refreshes – Xiong Xu Commented Mar 12, 2018 at 5:26

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

Try the following snippet. In the form I have added a target="_blank" so that it won't affect the current page. Also just to be sure I have added a javascript code to check whether the entered form data values are actually submitting via a console log.

$(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./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./bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

you can do it like ...

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to prevent the modal from closing after submitting form - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)