javascript - 确认 jquery 模态弹出窗口后提交表单

标签 javascript php jquery html forms

我已经为此花费了 5 个小时,但无法正常工作。我只想提交一个表单,让它通过 jquery ui 弹出窗口要求确认删除,确认后它会继续提交表单并转到 delete.php。

为简单起见,我已将其删除:

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
        e.preventDefault();
        $('#dialog').dialog('open');
    });
    $('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
            "Confirm": function() {
                $('#formDelete').submit();  
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
    }
});    
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p> 
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
    <input name="id" type="hidden" value="1">
    <input name="submit" type="submit">
</form>
</body>
</html>

我单击"is"按钮但没有任何反应。我曾尝试将提交 ID 更改为与表单相同,但读到它只会循环所有内容。

最佳答案

我无法 Eloquent 地说明原因,但我觉得它很模糊,如果你这样使用它:

<input name="submit" type="submit">
             ^^ input name submit

$('#formDelete').submit();
                  ^^

我不知道为什么但它有冲突,所以永远不要将按钮命名为 “submit”,而是在名称上附加一个数字以避免冲突。

在这里试试这个:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
    <input name="id" type="hidden" value="1" />
    <input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('input[name="submit1"]').on('click', function(e){
        e.preventDefault();
        $('#dialog').dialog('open');
    });

    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Confirm": function(e) {
                $(this).dialog('close');
                $('#formDelete').submit();


            },
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
});
</script>

旁注:实际上我之前有点偶然发现了这种问题,但我再也找不到了(实际上正确的答案和解释在那里,但我在 SO 上找不到)。

编辑:啊,在这里:

Additional Notes:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

http://api.jquery.com/submit/

关于javascript - 确认 jquery 模态弹出窗口后提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25902549/

相关文章:

javascript - 我如何使用 d3.js 为我的 svg 元素的顶部制作动画,就像在这个 gif 中一样?

php - 我想用 Jmeter 测试性能

jquery - 无限轮播适用于 chrome 但不适用于 firefox

jquery - 点击一个div来显示和隐藏jquery中的其他div

javascript - 外部 JavaScript 文件运行两次

javascript - 如何让 Visual Studio 2019 将 .js 文件视为 .jsx?

php - 选择所有MySQL数据,按月、年统计记录无法正常工作

php - 在Mysql中选择相邻的记录

jquery - Flot on Rails 占位符未定义

javascript - 使用 casperjs 检查元素