jQuery对话框提交不起作用

Question

昨天我开始在“ jQuery对话框”上工作，以替换jquery具有的默认确认框...我遇到了一个问题，我看到的所有教程都告诉我在表单上使用.submit（），但这似乎不是想要的表现出色（或为此完全发挥）

这是JSFIDDLE

现在这是我的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

这是因为您在调用$('#signinform').submit();时将$(document).on('submit', "#signinform", function(e)方法重新使用了e.preventDefault();的第一条指令$('#signinform').submit();

您需要设置一个临时变量来查看您是来自代码还是提交按钮。

这是带有工作测试的JSFiddle ，但是您应该做得更好=）

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

所以我得到了JSFiddle ，它并不是真正按照您想要的那样工作，但是如果您在单击Enter Queue按钮后再次触发了Submit按钮，它将起作用，所以我想知道为什么从调用该方法时commit（）方法不起作用这里。

您可以使用的一种方法是使用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>