Knowledge.ToString()

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

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

Comments

6 responses to “Why Bootstrap Button Click Submits Form Instead of Opening Modal Dialog?”

  1. Gary Bake Avatar
    Gary Bake

    Thank you for saving me hours finding the solution!

  2. jacob Avatar
    jacob

    absolutely huge this worked like a charm

  3. Kim Steinhaug Avatar
    Kim Steinhaug

    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 😀

  4. Julia Formichella Avatar
    Julia Formichella

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

  5. Genaro Avatar
    Genaro

    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.

  6. Katia Avatar
    Katia

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

Leave a Reply

Your email address will not be published. Required fields are marked *