Question

即使我销毁模态然后再次重新打开，表单也会多次提交。

虽然在模态中只包含一种形式：

请帮助如何防止/提交对话框中的一个表单！

HTML：

<a href="modal.php" class="mymodal" title="Submit Form">Open Modal</a>

Modal.php文件

<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 all 
      }
    });
  })

});

$('body').on('click','#myform', function(e){

   $.ajax({
   });

   return false;
});

Answer 1

我认为这个问题是因为您点击了一个有效href的锚点来打开模型。所以它会遵循href。

使用<a>阻止event.preventDefault()的默认操作：

$('body').on('click','.mymodal', function(e){

  e.preventDefault(); // add this

  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 all 
     }
    });
  })
});

jQuery UI Modal Destroy Form Submit

1 个答案: