表單提交使用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 
     } 
    }); 
    });