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

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

这里是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 提交表单

form submission using jquery.confirm

php

forms

jquery

dialog