当前位置：首页 → 问答吧 → 愁...求教牛人JConfirm在表单submit前顺畅执行问题

愁...求教牛人JConfirm在表单submit前顺畅执行问题

时间：2010-02-04

来源：互联网

小弟想用JQuery 的一个Dialog插件实现点击表单中按钮时弹出确认框。

但是屡屡不能得逞。

每次点击按钮，弹窗出现后，表单也迅速被submit，使得页面没等确认框进行确认就立即执行跳转，完全不能达到预想效果。

大致JS代码如下：

$(document).ready( function()
{
        $("#DFrom\\:delete_confirm").click( function(){
       jConfirm('Are you sure you want ot delete this thread?', '',function(r)
         {
              if(r==true)
         {
               $("#box").fadeOut(300);
         }
         });
          });
});
</script>

用FireBug查看过，大致原因可能是由于JConfirm 包含的 Function(r)是CallBack (瞎猜的，不知准不)。

如果把提交按钮的Button的 type改成Button来用JQuery负责提交事件的话，页面只是刷新，不能跳转。
真是头痛啊。。。

请教各位牛人有没有好的解决办法小弟不胜感激！！

作者: radarpq 发布时间: 2010-02-04

在form的submit事件里弹出，点确定了return true ，反之return false

作者: ywqbestever 发布时间: 2010-02-04

刚试了submit事件一下
还是同样的情况
弹出Dialog后还没等点就马上立即刷新跳转了

我想了个法  在Button的type为button情况下进行click事件，当弹框点击后用JQuery在Form中新生成个type=submit的button 然后再用click事件触发，不知可否。搞了搞这个想法的代码，但是有问题不能执行。悲剧啊

以下为"增加button type=submit"思路的问题代码

    $(document).ready( function() {
            $("#loginForm\\:loginButton").click( function()
            {
            //jConfirm
                    jAlert('Are you sure you want ot delete this thread?', 'Confirmation Dialog',
                    function(r) {
                    if(r==true)
                    {
                        $("#box").fadeOut(300);
                        var $oldButton = $("#loginForm\\:loginButton");
                        var $newButton = $("<button type='submit'/>")
                                              .val($oldButton.val())
                                               .appendTo($oldButton.parent());
                        $oldButton.remove();
                        $newButton.attr('id','loginForm\\:loginButton');
                           $("#loginForm\\:loginButton").click();
                        return true;
                    }else
                        return false;
                    });
                });
            });

作者: radarpq 发布时间: 2010-02-05

继续跪等牛人指点。。。

作者: radarpq 发布时间: 2010-02-05

好好研究下下面的

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js" ></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#test').submit(function(){
if(confirm('are you sure?')){
return true;
}else{
return false;
}
})
});
//]]>
</script>
</head>
<body>
<form method="post" action="testing.php" id="test" name="test">
<input type="submit" value="value" />
</form>
</body>
</html>

作者: ywqbestever 发布时间: 2010-02-05

这。。。
貌似楼上这位大侠的法子跟下面这个是等同的
<button id="subButton" type=submit onclick="return confirm("are you sure?");">

利用浏览器Javascript的Confirm是可以解决问题的
我的问题是
如果用JQuery的Dialog(如JQuery UI Dialog)
如何来处理表单按钮submit前的弹窗问题呢？

作者: radarpq 发布时间: 2010-02-05

额，原理一样的啊，我那样写只是让你更理解原理，截断submit事件，这个事件里返回false表单就不提交，如果要提交就在你事情处理完了之后return true就好了或者你把你的button别设置成提交按钮，在你要提交的时候自己执行form的submit？你明白？
然后你看你的代码，在click的函数中有return吗？你后来贴的代码里的return是写在哪个函数里的呢，所以说你要好好研究下原理嘛，你说对不对，要弄明白到底是怎么回事哈，遇到问题不要着急呢
给你段程序，你再好好研究吧，注意要好好研究透了

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.hiAlerts-min.js"></script>
<link rel="stylesheet" href="js/jquery.hiAlerts.css" type="text/css" />
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#testSubmit').click(function(){
var isAllowed = false;
hiConfirm('Are you sure?','confirm',function(r){
isAllowed = r ;
});
return isAllowed;
});//此种方式不可以，因为插件的alert或者confirm等不会暂停程序执行,直接返回false，表单永远不会提交，当然你也可以将这个段程序改的和下面一样的
$('#testButton').click(function(){
hiConfirm('Are you sure?','confirm',function(r){
if(r)
$('#myform').submit();
});
});
});
//]]>
</script>
</head>
<body>
<form method="post" action="testing.php" id="myform" >
<input type="submit" value="submit" id="testSubmit" />
<input type="button" value="button" id="testButton" />
</form>
</body>
</html>

作者: ywqbestever 发布时间: 2010-02-05

愁...求教牛人JConfirm在表单submit前顺畅执行问题

热门阅读

热门下载