Javascript jQuery模式确认对话框未提交表单

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

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.attr('name', 'delete');
                    tmpElm.attr('id', 'delete');
                    tmpElm.val(true);
                    tmpElm.appendTo(form);
                    form.submit();
                    return true;
                }
            }
        });
        $('#dialog-modal').dialog('open');
    }

$('#delete_btn').click(function() {

    $('#dialog-modal').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
                "Cancel": function() {
                    $(this).dialog("close");
                    return false;
                },
                "Delete User": function() {
                    $.ajax({                                                                                    
                url: "/admin/edit-user",
                type: "POST",
                            data: $('#edit_user_form).serialize(),
                error: function(XMLHttpRequest, textStatus, errorThrown)  {
                    alert("An error has occurred: " + errorThrown);
                },
                success: function(){
                        //Notify of success, redirect, etc.
                        }
                });
                }
            }
    });

});

函数confirmDeleteUser（）
{    
$（“#对话框模式”）。对话框({
自动打开：错误，
宽度：400，
莫代尔：是的，
可调整大小：false，
按钮：{
“取消”：函数（）{
$（此）.dialog（“关闭”）；
返回false；
},
“删除用户”：函数（）{
var self=$（这是）；
变量形式=$（“#编辑用户形式”）；
tmpElm=$（''）；
tmpElm.attr（'name'，'delete'）；
tmpElm.attr（'id'，'delete'）；
tmpElm.val（真）；
附录（表格）；
表单提交（）；
返回true；
}
}
});
$（'dialog modal'）。dialog（'open'）；
}

---

当我检查源代码时，我看到代码正确地附加了新的隐藏元素，但是提交似乎不想启动。我缺少哪一步？

如果您确定它附加了隐藏的输入，那么问题一定是在使用重复的ID。 按钮和隐藏的输入具有相同的ID。请使它们不同，然后重试

"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); // HERE ----------------
    tmpElm.appendTo(form);
    form.submit();
    return true;
}

或

---

我发现使用序列化表单值通过jqueryajax处理表单提交时不那么混乱。它还有一个额外的好处，即避免从

标记内的按钮提交不需要的表单。所以，它看起来像这样：

<form id="edit_user_form">
...
<button id="submit_btn">Submit</button><br />
<button id="cancel_btn">Cancel</button><br />            
<button id="delete_btn">Delete</button>
...
</form>

<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>

所以，它仍然通过POST提交。它现在可以异步发生（也可以不异步），您可以在不更改页面的情况下成功地“做事情”，或者根据需要重定向。我使用一个“dispatcher”页面提交到我的面向对象框架，然后该框架将输出返回给PHP dispatcher，以进行json_编码，并作为字符串进行回显，以便AJAX调用成功时使用。使用这种模式，我只需要有一个页面可以输出纯文本，其余的页面可以驻留在我的OO类中，如果不进行一些认真的编译（使用xajax），ajax无法直接调用这些类。

尝试另一种方法。

---

HTML

html包含以下内容：

onclick=“confirmDeleteUser（）；”

为什么?？jQuery应该让这对您来说更容易，而不是更难

您的HTML应该是纯HTML，不调用函数（除了极不可能遇到的极端情况）。为什么不使用jQuery库将事件绑定到元素，而不是将javascript函数调用混合到HTML中？在文档就绪语句之后，您应该在

标记中执行类似的操作

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

如果您不熟悉jQuery选择器和事件，那么

您应该这样做的另一个原因是文档没有正确/完全加载，以防止它对您的用户造成破坏

---

CSS

您还完成了以下操作：

style=“float:left；margin:0 7px 0；”

在HTML标记中？那太邪恶了，伙计。只是邪恶。我将如何在五个月内维护此代码

相反，使用CSS

在标签或CSS文件中，您需要一个条目，例如：

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

然后在HTML中，您会说：

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

当请求帮助时，使用像JSFIDLE这样的工具发布JavaScript，以便于其他人帮助您

如果您正在使用JavaScript进行大量工作，并且希望快速测试某些内容，请花一点时间学习如何使用它

以下是我希望您学习JSFIDLE的原因：

你没有给我们足够的代码来成功地使用，这导致我写了这篇关于代码质量和如何提问的博文，当你发布悬赏时更是如此。 如果你需要帮助，不要让人们为此而努力工作。除非有人完全疯了，否则你不会得到很好的帮助

JSFIDLE要求您发布实际的工作代码（或非工作代码），让我们查看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;
}

function（）{
var self=$（这是）；
变量形式=$（“#编辑用户形式”）；
tmpElm=$（''）；
tmpElm.prop（'name'，'delete'）；
tmpElm.prop（'id'，'delete'）；
tmpElm.val（真）；
附录（表格）；
表单提交（）；
返回true；
}

• 你为什么要公开自己？你一次也没用过。让我们摆脱它
• 你可以用一种叫做链锁的方法，这完全取决于你。有些人讨厌它
• 你在表单中添加了一个全新的输入，这看起来像是一个选择，我不确定这是否明智。我建议更改一个普通输入的值，或者使用另一种模式，这可能会导致很多问题，但是出于这个问题的考虑，我认为这样做是出于正确的原因。但是要小心，如果有人双击submit，则该输入会出现两次

• form

  是DOM中使用的保留字，应避免使用该字，以免混淆变量和DOM AP

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

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

    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');
      }
  

  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.
  

  <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>
  

  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;
  }
  

  <input type="submit" value="Save" name="submit" id="submit"/>
  

  <input type="submit" value="Save" />