Bootstrap 3 modal redirects page on open

Question

I have a very weird bug happening and I can't seem to figure out why. I have used Bootstrap since it's release and am very familiar with how it works. I have setup a form with buttons that trigger modals positioned at the bottom of the document. When you click on the button that triggers the modal it opens the modal but refreshes the page appending the form elements/values to the URL as if it were submitting the form using a GET method. When the page is refreshed the modal is no longer opened and the URL has all the form values in a query. I can't for the life of me figure out why this is happening. The modal should open up and the page should remain unaffected (other than the modal opening up)

Below 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 does in fact open, it just redirects the page when it does. Has anyone experienced a bug like this or have any idea what might be causing it?

Answer 1

If you have a <button> inside a form, HTML interprets that button as a submit button. Your page is reloading because the button is essentially submitting the form every time it is clicked.

Your first option to fix this would be to create a function which catches the event and then prevents it from submitting. This can be a headache if you have multiple buttons inside the from.

From the Bootstrap perspective the easiest thing is to change the <button class='btn'> to an <a class='btn'>. Bootstrap styles them the same way, so you can use them interchangeably. The benefit here is that it won't submit your form when you click an anchor tag.

Answer 2

It probably would be better for semantics to keep using the <button> tag and change the type attribute to "button", because it defaults to "submit" if not specified.

Answer 3

I know this is from a year ago but I'm having the same exact issue however changing it from a <button> to an <a> didn't help.

Additionally from Javascript I can't call $('#USPSModal').modal('show'); as it says it's not a function.

The weird part is if I put two modal div's with different ID's the second one always works but the first one never does.

This is what I have at the moment. I had it inside my form tag and inside my UpdatePanel I tried outside the UpdatePanel and outside the Form tag but got the same results. It always navigates the page instead of showing the 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>