在使用 onsubmission 事件确认之前执行 Javascript 表单操作

Question

我正在尝试使用<form onsubmission=return confirm("Please confirm");"> 删除<div> 时添加一个确认框，就像在这个thread 中一样，但是附加到我的表单的操作在我看到确认对话框之前执行。 <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() 的建议。试试这个：

建议一：

将 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>
        ');
    }
});
`

这是一篇关于在 Python 和 Flask 中使用 jQuery Ajax 的好文章： http://codehandbook.org/python-flask-jquery-ajax-post/