jQuery - 如何动态分配表单对象

Question

我正在尝试使用一个函数来提交我网站上的各种模态的表单。我遇到的问题是，当尝试序列化表单时，我收到错误"form.serialize（） 不是函数"。我相信我已经将其缩小到如何分配表单变量。

提交按钮：

<button id="modalSave" class="btn btn-primary" data-url="/Donors/save" data-form="#DonorAddForm" type="button">Submit</button>

提交功能：

$(".container").on("click", "#modalSave", function() {
    var form = $(this).data('form');
    $.ajax({
        url: $(this).data('url')
        dataType: "html",
        data: form.serialize(),
        beforeSend: function() {
            $("#loading").fadeIn();
        },
        success: function(data, textStatus) {
            $("#modalStatus").html(data);
        },
        complete: function() {
            $("#loading").fadeOut();
        }
    });
});

如果我更改行：

var form = $(this).data('form');

自：

var form = $('#DonorAddForm');

然后为"form"变量分配表单对象，否则它只是作为字符串分配。

如何将对象分配给"form"变量而不是字符串？

Answer 1

$(this).data('form') 不返回 DOM 元素 - 它返回数据表单属性的值，在本例中为字符串 #DonorAddForm 。要检索相应的 DOM 元素，请使用 jQuery 按 id 获取元素：

var formData = $(this).data('form'); // "#DonorAddForm"
var form = $(formData); // DOM element with id="#DonorAddForm"