The Jquery dialog box does not remain open in the form element


Does anybody know why if I try to place the button to open a dialog box (jquery dialog widget) within a form it pops open for a split second and then closes? Outside it works just fine.

So if I put:

<button id="opener">open the dialog</button>

It appears to be submitting form, although form has its own submit button?

<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );

Can someone please explain why this is happening? I seem to be too thick to grasp why opening from a button within a form element would cause it to not work? :)

PS: I also tried putting the div outside the form but that makes no difference. If the button is inside the form.

It is because of the button tag you are using. Every time you click the button the form get submited because the button is inside the scope of form. One way is to change the button tag into input type button or try like this using pure js:


<button id="opener" onclick="return showPopup()">open the dialog</button>


function showPopup(){
//code to show your dialog
return false