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.