Why Bootstrap Button Click Submits Form Instead of Opening Modal Dialog?

Category: Tricks n TechniquesTags:

Bootstrap makes it easy to open the modal dialog upon the button click. HTML code and Bootstrap Javascript will automatically take care of lots of modal dialog activity behind the scene.

I encountered a strange situation where the same code would work in the HTML page but not in the aspx page.

The issue is, if I click on the button to open modal dialog, the aspx page would perform a postback (form submission) but the same code will work just fine in the HTML page. Here is the example of the button code.

<button class="btn btn-default" id="showHelp" disabled="disabled" data-toggle="modal" data-target="#modalhelp" title="Show typing help" tabindex="-1">
    <i class="pi-pramukhime-sanskrit-help"></i>
</button>

The same code works in HTML page but not in the aspx page and causes the form submission.

No other JavaScript interferes with the bootstrap so it was difficult to find out the root cause.

After searching the internet and looking at the example, I found that the attribute type='button' is missing from my button tag. As soon as I added that attribute, everything worked as expected.

<button type="button" class="btn btn-default" id="showHelp" disabled="disabled" data-toggle="modal" data-target="#modalhelp" title="Show typing help" tabindex="-1">
    <i class="pi-pramukhime-sanskrit-help"></i>
</button>

Without attribute type='button' different browsers will treat button differently. Absence of “type” attribute will treat the button as submit button and hence the button click will always submit the form.

The reason it worked in the HTML file was because the HTML file did not have the form tag whereas the aspx file had a form tag which was causing a postback/form submission.

Share

4 comments

Your email address will not be published.

  1. Kim Steinhaug says:

    So there I was, scratching my head for the presice same reason you did. For me it was even more mind boggling as I have a form that is either containing data or its empty – difference is is one will update and the other will register a new something. So basically identical and both served by PHP.

    I was ready to start working with the show.bs.modal events and maby come up with a hack, so I am very happy that I did this little google search just in case someone posted a similar problem…. so thanks!

    Never heard or thought about this before, a button being a button so to speak… Gotta look into the docs for more info there, might be more I need to update 😀

  2. Julia Formichella says:

    WOW! This has saved us big time! Thank you!

  3. Genaro says:

    Thanks! Your solution made my day!
    First I was trying to understand what happened. Why my form was submitted when opening a modal? I was looking for the type=’button’ in the modal… and they were there. But then I found that the problem was on the button launching the modal.

  4. Katia says:

    Thank you. After much googling this simple change fixed my problem.