使用 jquery.confirm 提交表单

Question

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

<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()，但不起作用

Answer 1

如果不与按钮或表单关联，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()函数时，它会显示确认对话框，然后它会提交表单。提交隐藏对话框。本质上，与警报对话框相比，该对话框在可见时不会停止 UI 线程的执行alert('Alert')。

要解决此问题，应在显示确认对话框之前取消表单提交。现在，确认后您可以提交表格。取消表格无需执行任何操作。

以下是您可以执行此操作的方法：

$('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
      }
    });
  });