Prevent form submission while opening bootstrap modal dialog

By | January 5, 2017

Bootstrap makes it easy to open the modal dialog upon the button click. Html code 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 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 interfers 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. The reason it worked in the html file was because html file did not have the form tag whereas the aspx file had a form tag which was causing a postback/form submission. So the final code is

<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>
Vishal Monpara is a full stack Solution Developer/Architect with 12 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user’s mind leveraging geographically dispersed team members.

Leave a Reply

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