jQuery ui confirm dialog on multiple forms
我在同一页面上有几个表单,我想使用相同的代码为所有表单添加一个确认对话框。它们都有一个确认表单类,并且确认对话框的标题应该是动态生成的(这在 atm 中不起作用)。
在 html 中,我有一个在页面加载时隐藏的对话框,然后在调用
这就是我现在拥有的,它根本不工作,对话框加载但是一旦你按下确认,它就会重复 else 子句并且不提交表单:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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; } }); |
编辑
这是一种可能的解决方案。我已经在实时服务器上对其进行了测试,因为我在 jsFiddle 上遇到了一些不寻常的行为。注意:我取消了原始帖子,因为它没有解决多种表格。并且很可能表单提交将使用 AJAX 提交。
x.html的来源
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html> <html> <head>SO <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/> </head> <body> <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'); }); </body> </html> |
x.php的来源
1 2 | <?php echo"HELLO"; |
在找到这个脚本之前,我习惯于自制验证。它的脑损伤要少得多,并且似乎可以很好地验证几乎任何类型或组合的表单元素。每个元素只有一个类声明至少会打开验证。要每页执行两个(或更多),您只需为每个表单 ID 或名称实例化一个。很简单!