在通過onsubmission事件確認之前執行Javascript表單操作

Question

我試圖在使用<form onsubmission=return confirm("Please confirm");">刪除此<div>時添加一個確認框，就像在此線程中一樣 ，但是附加到我表單的動作在我看到之前被執行了確認對話框。 <div>是動態生成的，表單基本上使用Python / Flask刪除了一個csv行，並在修改后用JQuery / Javascript讀回。

首先，我有一個基本的html：

<div class="container">
    <div id="projects"></div>
</div>

然后，我使用javascript通過通過Python / Flask服務器從csv讀取的信息來動態附加多個<div> ：

var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');
    }
});

在后台，我正在使用Python / Flask讀取，操作和提供信息，但是我認為我的問題是在客戶端，因此沒有任何意義。 我遇到的問題是，當我按下'x'進行刪除時，在顯示對話框之前div被刪除了……任何幫助都會受到歡迎。

Answer 1

您需要使用event.preventDefault（）函數。 嘗試將您的代碼更改為下面的代碼，看看它是否有效：

var ProjName = {{ ProjName|safe }}; 
$(document).ready(function(e) {

e.preventDefault();

for(i = 0; i < {{ row_count|safe }}; i++) {
    $('#projects').append('<div class="projectDivs" id="'+ i +'"><form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"><input type="hidden" name="hidden-value" value="'+i+'"><button value="delete" name="submit" class="close">×</button></form><center><h2>'+ ProjName[i] + '</h2></center></div>');

  }
});

僅供參考，如果以上方法無效，則可以使用以下語法：

對於JavaScript：

window.addEventListener('keydown', function(e) {
    e.preventDefault();
   /* all your code goes here */
}, true);

對於jQuery

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
   /* all your code goes here */
});

=============================================

更新：

=============================================

好的。 我再次看到您的代碼，也許您可​​以忽略我對上面e.preventDefault（）的建議。 而是嘗試以下方法：

建議1：

將type =“ button”屬性添加到您的 標簽。 然后單擊按鈕的onClick（）事件，希望可以做到這一點。

建議2：

將type =“ button”屬性添加到您的 標簽。 然后單擊按鈕的onClick（）事件，使用ajax刪除csv文件。

您的代碼應如下所示。 對不起，沒有機會測試以下代碼。 如果您遇到錯誤並需要幫助，請隨時與我聯系。

`
$(function() {
    $('button').click(function() {
        var hiddenFieldValue = $("input[value='hidden-value']");
        $.ajax({
            url: '/dashboard',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});


var ProjName = {{ ProjName|safe }};    
$(document).ready(function(){
    for(i = 0; i < {{ row_count|safe }}; i++) {
        $('#projects').append('
            <div class="projectDivs" id="'+ i +'">
                <form method="post">
                    <input type="hidden" name="hidden-value" value="'+i+'">
                    <button type="button" value="delete" name="submit" class="close">×</button>
                </form>
                <center><h2>+ProjName[i]+</h2></center>
            </div>
        ');
    }
});
`

這是一篇關於將jQuery Ajax與Python和Flask一起使用的好文章： http : //codehandbook.org/python-flask-jquery-ajax-post/