prevent a postback from a html button element

scenario: a web page hosted by ASP.NET or SharePoint, and you want to use a html
<button> element, in order to easily add an image to a button.
you want the button to be client side only (i.e. javascript handles the click, and there is no postback.)

problem:
in IE8 browser, when you click on the button, a postback is performed, which causes part or whole page to reload.

note: this did not occur for me in Google Chome.

solution:
the solution is to make sure that your javascript handler returns false.
this is to indicate that the event does not require any more processing.

below is a real-world example, for a button that is styled using the dojo javascript framework.

please note the comment, where the javascript handler returns false, to prevent the postback from occurring.





 <button dojoType="dijit.form.Button" id="Button1">  
   <img src="images/intDbSearch/arrow_expand.png" alt="expand map" />  
   <!-- Expand -->  
   <script type="dojo/method" event="onClick">  
   //expand the map:  
   g_myMapApp.expandMap('centerPanelMap', 'presentDay');  
   return false; //to stop IE performing a postback  
   </script>  
 </button>  

Comments