javascript - 无法从按钮操作获取表单字段(JavaScript)

Question

我使用带有表单的模态窗口以及“保存设置”按钮来触发对 ASP.NET Core 后端的 JavaScript/AJAX 调用(最终)。当我使用 Chrome 检查元素时，我可以看到所有属性，但是我从 .serializeArray() 保存的变量仅生成 __RequestVerificationToken。

JavaScript:

$(document).on("click", "#btnSaveSettings", function () {
    var savedSettings = $('form#frmSaveSettings').serializeArray();
    console.log(savedSettings);
});

HTML:

<form asp-page-handler="SaveSettings" class="form-horizontal" id="frmSaveSettings" method="post">
<fieldset> //most elementes removed for clarity!
    <legend>Edit network node</legend>
        <div class="form-group">
            <label class="col-lg-4 control-label">Domain name</label>
            <div class="col-lg-8">
                <input class="form-control" type="text" id="spanPartitionKey" readonly />
            </div>
        </div>
</fieldset> 
<div class="modal-footer">
    <div class="col-lg-12">
        <div class="row">
            <div align="left" class="col-sm-2">
                <button type="button" class="btn btn-danger">Delete node</button>
            </div>
            <div align="right" class="col-sm-10">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="btnSaveSettings">Save settings</button>
            </div>
        </div>
    </div>
</div>

基于上述内容，我希望 savedSettings 包含表单控件的值(以及防伪 token )。我在同一页面中有另一个模式表单，可以正常工作，但是我没有以相同的方式抓取表单元素；相反，我通过它们的 id 标签来引用它们。

知道为什么会这样吗？

Answer 1

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.

<input>示例代码中的元素没有 name属性，设置它并且serializeArray()将包含它。

来源:Documentation .