表单提交使用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()功能，它显示确认对话框，之后它将提交表单。提交隐藏了对话框。实质上，对话框不会在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 
     } 
    }); 
    });