javascript - jQuery Modal Confirmation对话框未提交表单

当用户按下编辑表单上的删除按钮时，我试图弹出一个确认模式。模态弹出很好，但是当jQuery应该提交表单时，它什么也没做。我将delete删除为type =“button”，因为当它是类型commit时，模态函数不会阻止该过程，而只是立即删除用户。

HTML ...

-编辑-

(我添加了<form>标签)

<form action="/admin/edit-user" enctype="application/x-www-form-urlencoded" method="post" name="edit_user_form" id="edit_user_form">
...
<p><input type="submit" value="Save" name="submit" id="submit"/></p>
<p><input type="submit" value="Cancel" name="cancel" id="cancel"/></p>
<p><input type="button" value="Delete User" name="delete_btn" id="delete_btn" onclick="confirmDeleteUser();"/></p>
...
</form>

...

<div id="dialog-modal" title="Confirm Delete User">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Are you sure you wish to delete this user?</p>
<p>To continue editing, click cancel.</p>
</div>

Javascript:

   function confirmDeleteUser()
    {
        $('#dialog-modal').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,

            buttons: {
                "Cancel": function() {
                    $(this).dialog("close");
                    return false;
                },
                "Delete User": function() {
                    var self = $(this);
                    var form = $('#edit_user_form');
                    tmpElm = $('<input type="hidden" />');
                    tmpElm.attr('name', 'delete');
                    tmpElm.attr('id', 'delete');
                    tmpElm.val(true);
                    tmpElm.appendTo(form);
                    form.submit();
                    return true;
                }
            }
        });
        $('#dialog-modal').dialog('open');
    }

当我检查源代码时，我看到代码正确地添加了新的隐藏元素，但是提交似乎并不想触发。我错过了哪一步？

最佳答案

以其他方式尝试。

HTML
您的html具有以下内容:onclick="confirmDeleteUser();"为什么？ jQuery应该会让您更轻松，而不是更难的。
您的HTML应该是纯净的，而不是调用函数的(极不可能遇到的极端情况除外)。为什么不使用jQuery库将事件绑定(bind)到元素，而不是将javascript函数调用混入HTML？在文档准备就绪语句之后，您应该在<script>标记中执行类似的操作。

$("#delete_btn").click(function(e){
    /*Code that runs on click of the "delete_btn" ID tag*/
});

如果您不熟悉jQuery选择器和事件，请使用start reading here。

You can find all the events here。

You can find all the selectors here

您应该执行此操作的另一个原因是，如果未正确/完全加载文档以防止文档损坏您的用户。

CSS
您还完成了此操作:HTML标记中的style="float:left; margin:0 7px 0 0;"？那太恶了，伙计。只是邪恶。我将如何在五个月内维护此代码？
而是使用CSS。
在标签或CSS文件中，您需要输入以下内容:

.dialogAdjust {
    float: left;
    margin: 0 7px 0 0;
}

然后，在您的HTML中，您会说:

<span class="ui-icon ui-icon-alert dialogAdjust"></span>

现在，您可以根据自己的喜好对事物进行调整。 如果可以在对话框div上创建类，而不是单个HTML元素，则更好，在这种情况下，绝对可以。

JavaScript
好的，这是您的功能:

  function confirmDeleteUser()
    {
        $('#dialog-modal').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,

            buttons: {
                "Cancel": function() {
                    $(this).dialog("close");
                    return false;
                },
                "Delete User": function() {
                    var self = $(this);
                    var form = $('#edit_user_form');
                    tmpElm = $('<input type="hidden" />');
                    tmpElm.prop('name', 'delete');
                    tmpElm.prop('id', 'delete');
                    tmpElm.val(true);
                    tmpElm.appendTo(form);
                    form.submit();
                    return true;
                }
            }
        });
        $('#dialog-modal').dialog('open');
    }

这里发生了什么？第一步，您应该尝试并使用一种工具来测量代码质量。两种流行的是JSHint和JSLint。您不需要遵循他们所说的话，就像这是编写代码的唯一方法一样，但是它对于发现由于小错误而导致的错误非常有帮助。我喜欢JSHint，因此我们将通过它来运行它。
这是输出:

Errors:

Line 17 tmpElm = $('<input type="hidden" />');
'tmpElm' is not defined.
Line 18 tmpElm.attr('name', 'delete');
'tmpElm' is not defined.
Line 19 tmpElm.attr('id', 'delete');
'tmpElm' is not defined.
Line 20 tmpElm.val(true);
'tmpElm' is not defined.
Line 21 tmpElm.appendTo(form);
'tmpElm' is not defined.

哎呀。看起来您那里有一个 undefined variable ，这意味着它现在是全局的。全局变量是不好的，它们破坏了作用域，并可能以奇怪的方式使您的代码起作用。
我们需要解决这个问题。您应该始终在局部范围内声明局部变量。这意味着在“删除用户”功能的顶部放置一个var tempElm;。
不用该函数包装器，就不需要它了。文档加载完成后，您的代码应创建对话框对象和代码，并在单击对话框时打开对话框。原始代码中发生的事情既会创建对话框，又会在您每次单击该按钮时将其打开。这是什么问题？即使创建了对象，您仍会继续创建它。您一次又一次地创建相同的对象。在此实现中，您不会注意到它，但是您的设计将继续到可能出现的地方，除非您立即注意到这一点。
那么，那是什么样的呢？在<head>标记中，您应该看到以下内容:

<script>

    /*
        This makes all the code inside
        run when the window is done loading,
        not before, which may cause issues.
    */
    $(window).load(function(){


        /*
            This sets up the dialog
            as you've described before
        */
        $('#dialog-modal').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,

            buttons: {
                "Cancel": function() {
                    $(this).dialog("close");
                    return false;
                },
                "Delete User": function() {
                    var self = $(this);
                    var form = $('#edit_user_form');
                    //We've added the var infront of tepElem
                    var tmpElm = $('<input type="hidden" />');
                    tmpElm.prop('name', 'delete');
                    tmpElm.prop('id', 'delete');
                    tmpElm.val(true);
                    tmpElm.appendTo(form);
                    form.submit();
                    return true;
                }
            }
        });

        /*
            This is the part where I talked
            about selectors and events in the HTML
        */
        $("#delete_btn").click(function(e){
            $('#dialog-modal').dialog('open');
        });
    });
</script>

当寻求帮助时，请使用jsFiddle之类的工具来发布JavaScript，以使其他人可以更轻松地为您提供帮助。
Here's a jsFiddle of the revisions we've made so far.如果您正在JavaScript上做大量工作并且想真正快速地测试某些东西，请花一些时间来学习如何使用它。
这就是我希望您学习jsFiddle的原因:
您没有给我们足够的代码来成功地工作，因此导致我撰写了一篇有关代码质量和如何提出问题的大型文章，当您发布悬赏时，就加倍了。
如果您需要帮助，请不要让人为之努力工作。除非有人完全发疯，否则您不会得到很好的帮助。
jsFiddle要求您发布实际的工作代码(或非工作代码)，让我们看看form.submit()是否存在问题，例如form元素上的任何奇怪的属性或属性，或者可能存在的其他许多问题。踢你被排除在外。
因此，让我们看一下破坏“删除用户”功能的原因。

function() {
    var self = $(this);
    var form = $('#edit_user_form');
    tmpElm = $('<input type="hidden" />');
    tmpElm.prop('name', 'delete');
    tmpElm.prop('id', 'delete');
    tmpElm.val(true);
    tmpElm.appendTo(form);
    form.submit();
    return true;
}

为什么要声明自己？您永远不会使用它一次。让我们摆脱它。

您可以使用称为链接的方法，这完全取决于您。有人讨厌它。

您可以将一个全新的输入添加到表单中，以获得看起来像选择的内容，但我不确定这是明智的。我建议更改普通输入的值，或使用其他模式，这可能会导致很多问题，但是出于这个问题，我想它是出于所有正确的原因而完成的。但是请注意，如果有人双击提交，则该输入将出现两次。

form是DOM中保留的一个单词，您应该避免使用该单词，以免变量和DOM API之间产生混淆。

我们单击哪个表单提交按钮？您有很多，而jQuery不会猜测并希望取得最好的结果。

表单外观:
The w3 explains what forms are and the purpose of things.
关键点:

名称与值

配对

发送单击的提交按钮，不发送未单击的提交按钮。

可以基于NAME和ID属性

来导航DOM。

您的表单中发生了一些奇怪的事情。
这是javascript可以理解如何提交的表单:
http://jsfiddle.net/YS8uW/2/
这是javascript尝试提交您的表单(精简为准):
http://jsfiddle.net/LfDXh/
这里有什么不同？

您到处都有ID。

您使用关键字来命名

让我们看看您已完成的工作，并为其指定了提交给某人的ID:
http://jsfiddle.net/fdLfC/
当我们不将其用作ID时会发生什么？
http://jsfiddle.net/fdLfC/1/
啊所以这很奇怪。
就像给它提供一个提交ID不会让您称其为Submit。正确的解释是，您重新编写了它，因为在分配ID和名称时dom做到了，dom试图调用该元素。
如果您打开调试器或其他工具，您会看到此信息，它会向您发出以下警报:

远离使用关键字的含义，您将不会陷入这些怪异的陷阱。
非常感谢@MattMcDonald将我链接到this resource，它解释了如何处理以及为什么NAME和ID属性覆盖了内置HTML DOM方法。
做我也说过的其他事情。免责声明:每个人都会对我发动 war ，我同意你做所有这些事情不是绝对的，但我认为这篇文章足够长，我们都同意做这些事情是我前进的一步。代码质量，而不是倒退。最后由您自己决定，但请避免将它们混合到一个巨大的困惑锅中。考虑一下代码的执行以及它是如何发生的。