使用jquery.confirm提交表单 - form submission using jquery.confirm

有很多关于如何在确认对话框上单击"确定"按钮后提交表单的例子，但我无法使其工作。

<form class="myform" method="post" 
                     action="<?php echo Configure::read('Settings.MYURL'); ?>">
  <input type="hidden" name="type" value="bdt" />
  <input type="hidden" name="data" value="<?php echo $session['Session']['id']; ?>" />
  <input type="hidden" name="id" value="<?php echo $subscriber_id; ?>" />
  <input type="hidden" name="p_id" value="<?php echo $available_packages['Package']['id']; ?>"/> 
  <input type="hidden" name="ext_id" value="<?php echo $available_exten_pack['id']; ?>"/> 
  <input type="hidden" name="redirected_from" value ="<?php echo $this->request->here; ?>" />
  <input id = "loginurl"  type="hidden" name="loginurl" value="<?php echo Router::fullBaseUrl() . Router::url(array('controller' => 'Home', 'action' => 'login')); ?>" /> 
  <input class="btn btn-sm btn-primary pull-right extendpackage"  type="submit"  name="submit" value="Subscribe">
</form>

我将jquery-confirm.js用于对话、警报等。如果用户点击提交按钮或提交表单

$.confirm({
    columnClass: 'col-md-4 col-md-offset-4',
    theme: 'white',
    title: 'Add',
    content: 'do stuff',
    confirmButton: 'Ok',
    cancelButton: 'Cancel',
    confirmButtonClass: 'btn-success',
    cancelButtonClass: 'btn-danger',
    confirm: function() {
        // i want user submit my form
        //which posts my data to an action 
        //
    },
    cancel: function() {
    }
});

我尝试过$('.myform').submit()，但它不起作用。

jquery.confirm.js在没有与按钮或表单关联的情况下不会调用确认对话框。因此，您需要将确认操作与提交按钮关联。您还可以在表单提交时显示确认对话框。

要将确认操作与按钮相关联，可以执行以下操作：

$('input[type=submit]').confirm({
    columnClass: 'col-md-4 col-md-offset-4',
    theme: 'white',
    title: 'Add',
    content: 'do stuff',
    confirmButton: 'Ok',
    cancelButton: 'Cancel',
    confirmButtonClass: 'btn-success',
    cancelButtonClass: 'btn-danger',
    confirm: function() {
      //Submit the form
      $('.myform').submit();
    },
    cancel: function() {
      //Do nothing
    }
  });

此代码将在单击提交按钮时显示确认对话框。

这是的演示

更新：如何在form.submit（）函数中包含确认对话框代码

如果你在form.submit函数中包含这样的确认对话框显示代码，你会发现确认对话框没有出现：

$('form').submit(function(event) {
   $.confirm({
        //confirm dialog options...
        confirm: function() {
        //Submit the form
        },
        cancel: function() {
        //Cancel submission
        event.preventDefault();
        }
    });
});

原因是当您调用$.confirm()函数时，它会显示确认对话框，然后提交表单。提交会隐藏对话框。本质上，与警报对话框alert('Alert')相比，当UI线程可见时，对话框不会停止执行。

要解决此问题，应在显示确认对话框之前取消表单提交。现在，在确认后，你可以提交表格。取消表格没有什么可做的。

以下是如何做到这一点：

$('form').submit(function(event) {
    event.preventDefault();
    var form = $(this)[0];
    $.confirm({
      columnClass: 'col-md-4 col-md-offset-4',
      theme: 'white',
      title: 'Add',
      content: 'do stuff',
      confirmButton: 'Ok',
      cancelButton: 'Cancel',
      confirmButtonClass: 'btn-success',
      cancelButtonClass: 'btn-danger',
      confirm: function() {
        //Submit the form
        form.submit();
      },
      cancel: function() {
        //Do nothing
      }
    });
  });