Question

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

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

当我检查源代码时，我发现代码正在附加新的隐藏元素，但提交似乎并不想触发。我错过了什么步骤？

Answer 1

如果您确定它附加隐藏的输入，则问题必须是使用重复的ID。按钮和隐藏输入具有相同的ID。让它们与众不同，然后再试一次。

Answer 2

不要问我它之所以有用的原因，我可以告诉你的是，在完成这个和那个并且撕掉你代码的每一部分之后，终于让它成功了。点击下面的链接查看演示

http://jsfiddle.net/praveen_prasad/KaK5A/4/

我所做的更改包括：从表单提交按钮中移除id和name属性

示例：

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

将上方改为

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

注意对于JsFiddle演示：当您单击模态上的删除用户时，表单将提交。 jsfiddle将说“错误404”，因为它不会找到您发布表单的链接。打开firebug并看到它实际发布到正确的URL。

Answer 3

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

在指定地点，不应该是：

tmpElm.value(true);

或

tmpElm.attr('value', 'true');

Answer 4

我发现通过带有序列化表单值的jQuery ajax确认处理我的表单提交不那么令人困惑。它具有额外的好处，可以避免<form>标记内的按钮提供不需要的表单。所以，它看起来像这样：

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

然后是javascript：

$('#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.
                        }
                });
                }
            }
    });

});

所以，它仍然通过POST提交。它现在可以异步（或不是）发生。您可以在不改变页面的情况下“成功”，或者根据需要重定向。我使用“调度程序”页面提交到我的面向对象的框架，然后将输出返回给PHP调度程序以进行json_encoded并作为字符串回显，以便成功使用AJAX调用。使用这种模式，我只需要有一个页面吐出纯文本，其余的可以驻留在我的OO类中，这不能被ajax直接调用而不做一些严重的纠缠（使用xajax）

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

5 个答案: