多表单上使用jQuery UI确认对话框

Question

多表单上使用jQuery UI确认对话框

3

我在同一页上有几个表单，想使用相同的代码为它们添加确认对话框。它们都有一个类名为“confirm-form”，确认对话框的标题应该动态生成（目前不起作用）。

在HTML中，我有一个对话框，在页面加载时被隐藏，一旦调用dialog('open')函数就会显示出来。

这是我现在拥有的代码，但它根本不起作用，对话框加载后，一旦按下确认按钮，它就会重复执行else子句，并且无法提交表单：

var deleteConfirmed = false;
$('form.confirm-form').submit(function(e) {
if ( ! deleteConfirmed)
{
    e.preventDefault();
    var title = $(this).find('input.action').val();
    var $this = $(this);
    console.log('title: ' + title);

    $('#confirm-dialog').attr('title', title);

    $('#confirm-dialog').dialog({
        buttons : {
            "Confirm" : function() {
                deleteConfirmed = true;
                $(this).dialog('close');
                $this.submit();
            },
            "Cancel" : function() {
                $(this).dialog('close');
            }
        }
    });

    $('#confirm-dialog').dialog('open');
}
else
{
    $(this).submit();
    deleteConfirmed = false;
}
});

- Becky

2个回答

0

我曾经自己编写验证程序，直到我找到了this script。它非常简单易用，似乎可以很好地验证任何类型或组合的表单元素。每个元素只需要一个类声明即可最少程度地开启验证。如果要在页面上使用两个（或更多）表单，只需为每个表单ID或名称实例化一个验证程序即可。非常容易！

- bpeterson76

太棒了。我得自己试试。谢谢你提供的链接。 - T.P.

我的表单验证都是在 Kohana 中完成的，当用户选择删除某些内容时，我希望能弹出一个小确认框，显示“您确定要删除这个吗”，不过还是谢谢你提供的链接！ - Becky

贝基，我们也在后端进行验证......这个脚本允许你轻松地进行前端验证。虽然它可能不能回答你的问题，但客户端验证几乎总是比仅仅使用后端更好，因为它更快，对用户体验的干扰也更少。它还可以节省服务器的请求次数。 - bpeterson76

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.P. · Accepted Answer

编辑

这里是一种可能的解决方案。由于在jsFiddle上出现了一些异常行为，我已经在实际服务器上对其进行了测试。注意：我放弃了原来的帖子，因为它没有涉及多个表单。而且很可能表单提交将使用AJAX提交。

x.html的源代码


<!DOCTYPE html>
<html>
<head><title>SO</title>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
  rel="stylesheet"
  type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>

<div id="dlg1"></div>
<form method="post" action="/so/x.php" id="frm1" name="frm1">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm1_submit">
</form>
<form method="post" action="/so/x.php" id="frm2" name="frm2">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm2_submit">
</form>
<form method="post" action="/so/x.php" id="frm3" name="frm3">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm3_submit">
</form>


<script type="text/javascript">
var $current = { form : null, do_submit : false };

$('#dlg1').dialog({
    title: "Confirmation",
    width: 300,
    height: 200,
    autoOpen: false,
    modal: true,
    buttons : {
      "Confirm" : function(e){
        $current.do_submit = true;
        $(this).dialog('close');
      },
      "Cancel"  : function(e){
         $current.do_submit = false;
         $(this).dialog('close');
      }
    }
});

$('#dlg1').bind('dialogbeforeclose', function(){
    if($current.do_submit){
      ($current.form).submit();
      $current.form = null;
      $current.do_submit = false;
    }
});

$('.submitter_btn').click(function(e){
    e.preventDefault();
    $current.form = $(this).parents('form:first');
    $('#dlg1').dialog('open');
});


</script>
</body>
</html>

x.php的源代码


<?php
echo "HELLO";