logo标签列表

确认 jQuery 模态框后提交表单

javascriptphpjqueryhtmlforms
4

我已经花了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>

我点击了“是”按钮，但什么都没有发生。我尝试将提交ID更改为与表单相同，但读到说这只会让一切陷入循环。

1个回答
8

我无法流畅地阐述原因，但我发现虽然有点模糊，但如果你像这样使用它：

<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上找不到它）。

编辑：啊，这就是它：

附加说明：

表单及其子元素不应使用与表单属性冲突的输入名称或ID，例如 submit、length 或 method。名称冲突会导致令人困惑的故障。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接