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

此代码将显示点击提交按钮的确认对话框。

以下是demo

<强>更新： 如何在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
      }
    });
  });

使用jquery.confirm提交表单

1 个答案: