Geek asks and answers

Boot page of the boot lot of 3 modal redirects

I have a very strange error, and I can’t understand why. I have used Bootstrap since its release and am very familiar with how it works. I set up a form with buttons that launch the modals located at the bottom of the document. When you click on the button that launches the modal, it opens the modal, but refreshes the page by adding form elements / values ​​to the URL, as if it was submitting the form using the method GET. When the page refreshes, the modal no longer opens, and the URL has all the form values ​​in the request. I can’t understand for life why this is happening. The modal should open and the page should remain unaffected (except for the modal opening)

The following is the HTML for the form element and modal button:

<div class='form-group'>
    <label class='control-label' for='store-name'>
        Store Name:
    </label>
    <div class='controls'>
        <input type='text' class='form-control' id='store-name' name='store-name'>
        <button class='btn btn-default' data-toggle='modal' data-target="#storeName">Lookup</button>
    </div>
</div>

and here is the HTML for the modal itself:

<!-- Store Name Modal -->
<div class="modal fade" id="storeName" tabindex="-1" role="dialog" aria-labelledby="storeName" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Stores</h4>
            </div>
            <div class="modal-body">
                <!-- Modal Content -->  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

All scripts / styles are included because the modal is really open, it simply redirects the page when this happens. Has anyone experienced an error like this, or had any idea what might cause it?

+3
source share
3 answers

If you have a <button>form inside, HTML interprets this button as a submit button. Your page reloads because the button essentially represents the form each time it is clicked.

, , . , .

Bootstrap <button class='btn'> <a class='btn'>. Bootstrap , . , , .

+8

, <button> type "button", "submit", .

+1

, , , <button> <a> .

Javascript $('#USPSModal').modal('show');, , .

- div , , .

This is what I have at the moment. I had this inside the form tag and inside my UpdatePanel, which I tried outside of the UpdatePanel and outside the Form tag, but got the same results. It always moves the page, rather than showing a modal window.

<a class="btn btn-info btn-lg" data-toggle="modal" data-target="#USPSModal">Open Modal</a>

  <!-- Modal -->
  <div id="USPSModal" 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">USPS Address Check</h4>
        </div>
        <div class="modal-body">
          <div>
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-6">
                  <asp:Label ID="LabelUserEnteredAddress" runat="server" />
                </div>
                <div class="col-md-6">
                  <asp:Label ID="LabelUSPSAddress" runat="server" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
0
source

More articles:


All Articles