无法通过按钮操作（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包含表单控件的值（以及防伪令牌）。我在同一页上有另一个模式窗体，该窗体可以正常工作，但是我不是以相同的方式抓取窗体元素。而是我用他们的id标签来引用它们。

知道为什么会这样吗？

Answer 1

  

.serializeArray（）方法将标准W3C规则用于   成功的控制，以确定应包括哪些元素；在   特别是该元素不能被禁用，必须包含一个名称   属性。

示例代码中的<input>元素没有name属性，对其进行设置，然后serializeArray（）将包含该属性。

来源：Documentation。

Answer 2

按照Documentation of $().serializeArray()方法，它通过name而不是id进行序列化。因此，您只需要向每个输入添加适当的name属性即可。