javascript - jQuery UI Modal Destroy Form Submit -

form submitted multiple times when destroy modal , reopen again.

although in modal contain 1 form:

please how prevent / submit 1 form on dialog!

html:

<a href="modal.php" class="mymodal" title="submit form">open modal</a> 

modal.php file

<form id="myform" role="form">  <div><label>username:</label> <input type="text" name="uname"></div> <div><label>message:</label> <input type="text" name="message"></div> <div><input type="submit" name="submit"></div>  </form> 

js:

$('body').on('click','.mymodal', function(e){    var $this = $(this);    var output = $('<div id="uimodal-output" title="'+$this.prop('title')+'"></div>');   $('body').append(output);    output.load( $this.attr('href'), null, function() {     output.dialog({       modal: true,       width:'auto',       position: 'center',       close: function(event, ui) {          $(this).dialog('destroy').remove();          $('#uimodal-output').dialog('destroy').remove(); // destroy        }     });   })  });  $('body').on('click','#myform', function(e){     $.ajax({    });     return false; }); 

the issue believe because you're clicking anchor valid href opening model. it'll follow href.

prevent default action of <a> using event.preventdefault() :

$('body').on('click','.mymodal', function(e){    e.preventdefault(); // add    var $this = $(this);    var output = $('<div id="uimodal-output" title="'+$this.prop('title')+'"></div>');   $('body').append(output);   output.load( $this.attr('href'), null, function() {     output.dialog({       modal: true,       width:'auto',       position: 'center',       close: function(event, ui) {        $(this).dialog('destroy').remove();        $('#uimodal-output').dialog('destroy').remove(); // destroy       }     });   }) });