Question

昨天我开始研究一个Jquery对话框来替换jquery的默认确认框...我遇到了一个问题，我看到的所有教程告诉我在我的表单上使用.submit（）但是没有似乎想要很好地发挥（或根本不玩）

现在这是我的javascript，对我不起作用：

<script>

$(document).ready(function() {
        $(function() {
            var currentForm;
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: false,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        currentForm.submit();
                    }
                }
            });
        });

    $("#signinform").submit(function() {
        currentForm = this;
        $('#dialog-confirm').dialog('open');
        return false;
    });
});

</script>

问题出现在“输入队列”按钮上。几乎所有情况（因为它显示在jsfiddle上）是我需要用户确认办公室的规则，如果他们这样做，他们点击一个复选框，一旦他们这样做，然后他们点击提交，然后发送一个对话框，向用户解释他们将要进入的内容。但由于某种原因，“输入队列”按钮不执行任何操作。我很困惑。任何帮助都会很棒。

由于

Answer 1

这是因为您重新使用$(document).on('submit', "#signinform", function(e)方法当你拨打e.preventDefault();时，第一条指令获得$('#signinform').submit();。

您需要设置一个临时变量，以便查看您的代码或提交按钮。

Here is a JSFiddle有一个工作测试，但你应该做更好的事情=）

编辑：Javascript是异步语言，这意味着您的$('#dialog-confirm').dialog('open');不会阻止并只修改html，因此提交事件将始终返回false - ＆gt;永远不会发送。

所以我得到的JSFiddle并不是你想要的，但是如果你点击Enter Queue按钮后第二次触发提交按钮它会工作，所以我想知道为什么submit（）方法从这里打电话时不起作用。

您可以使用的方法是使用ajax发送表单（在jquery中查看post()），然后使用window.location =“yourpage”等内容重定向您的用户。

Answer 2

尝试这种方式（jsFiddle）：

$(document).ready(function() {
    window.enterQueue=false;
    $("#signinform input:submit").on('click',function() {
        return getDialog(window.enterQueue);            
    });

    function getDialog(enterQueue){
        if(!enterQueue){
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: true,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        window.enterQueue=true;
                        $(this).dialog("close");
                        $("#signinform input:submit").trigger('click');
                    }
                }
            });
            return false;
        } else 
            return true;
    }

}）;

Answer 3

昨晚我在jquery网站和很多google-ing的帮助下弄明白了。感谢你们两位的帮助和时间，我们得到了答案。 + 1

这是我的解决方案：

<script type="text/javascript">

    $(document).ready(function() 
    {
        var Form = $("#signinform");
        $(function() 
        {
            $("#dialog-confirm").dialog(
            {
                resizable: false,
                autoOpen: false,
                dialogClass: "no-close",
                draggable: false,
                height: 320,
                width: 500,
                modal: true,
                buttons: 
                {
                    'Cancel': function() 
                    {
                        $(this).dialog("close");
                        Form.data("confirmProgress", false);
                    },
                    'Submit Information': function() 
                    {
                        Form.submit();
                        Form.data("confirmProgress", false);
                    }
                }
            });
        });
        Form.submit(function() 
        {
            if (!$(this).data("confirmProgress")) 
            {
                $(this).data("confirmProgress", true);
                $('#dialog-confirm').dialog('open');
                return false;
            } else {
                return true;
            }

        });
    });
    // Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
 $(document).on('click', "#Cancel", function(e)
    {
        e.preventDefault();
        var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
        $("#dialog-noconfirm").dialog(
        {
            resizable: false,
            dialogClass: "no-close",
            draggable: false,
            height: 320,
            width: 500,
            modal: true,
            buttons: 
            {
                "Cancel": function() 
                {
                    $(this).dialog("close");
                },
                "Go Back": function() 
                {
                    window.location.href = href;
                },
            }
        });
    });

</script>

Jquery对话框提交不起作用

3 个答案: