Question

我正在尝试通过jQuery模式对话框进行一些数据输入。我希望使用以下内容来收集我的数据以便发布。

data = $('#myDialog').serialize();

然而，这没有任何结果。如果我仅引用包含的表单而不是myDialog，那么我将获得页面上的所有字段，除了我的对话框中的那些字段。

在AJAX提交的对话框中收集表单字段的最佳方法是什么？

Answer 1

发生这种情况的原因是dialog实际上正在删除您的元素并在文档正文的根级别添加它们。这样做是为了使对话脚本可以对其定位充满信心（确保对话框中的数据不包含在相对定位的元素中）。这意味着您的字段实际上不再包含在您的表单中。

你仍然可以通过id（或类似的东西）访问各个字段来获取它们的值，但是如果你想使用一个方便的serialize函数，你将需要一个表单对话框。

Answer 2

我遇到了完全相同的问题，因为我在对话框中有太多的字段来单独引用它们，我所做的就是将对话框包装成临时表单，序列化它并将结果附加到我的原始表单中执行ajax调用之前的序列化数据：

function getDialogData(dialogId) {
    var tempForm = document.createElement("form");
    tempForm.id = "tempForm";
    tempForm.innerHTML = $(dialogId).html();
    document.appendChild(tempForm);
    var dialogData = $("#tempForm").serialize();
    document.removeChild(tempForm);
    return dialogData;
}

function submitForm() {
    var data = $("#MyForm").serialize();
    var dialogData = getDialogData("#MyDialog");
    data += "&" + dialogData;
    $.ajax({
        url: "MyPage.aspx",
        type: "POST",
        data: data,
        dataType: "html",
        success: function(html) {
            MyCallback(html);
        }
    });
}

Answer 3

对话框中的表单元素将从表单中删除并移动到正文的末尾。你需要这样的东西。

 $("#dialog_id").dialog().parent().appendTo($("#form_id"));

Answer 4

jQuery("#test").dialog({
           autoResize:true,
           width:500,
           height:600,
           modal: true,
           bgiframe: true,
           }).parent().appendTo("form");

这就像魅力一样

jQuery对话框发布表单字段

4 个答案: