确定字段（在提交事件上）是下拉列表还是输入

Question

我的问题是在我名为提交的按钮上；单击提交按钮后，我想将数据从视图保存到我的模型。我想将每个字段输入存储到一个对象中，以便我可以将数据存储在我的模型中。问题是我想确定它是下拉列表还是输入，因为这是我检索值的方式。但如果有更好的方法，我会洗耳恭听。也许我不需要知道它是文本输入还是下拉菜单的区别。

这是我正在处理的代码：

submit: function(e) {
    var field = $(e.currentTarget);

},

selectionChanged: function(e) {
    var field = $(e.currentTarget);
    var value = $("option:selected", field).val();
    var data = {};
    data[field.attr('similarID')] = value;
    this.model.set(data);
},

fieldChanged: function(e) {
    var field = $(e.currentTarget);
    var data = {};
    data[field.attr('similarID')] = field.val();
    this.model.set(data);
},

//update values in model from form
update: function(e) {
    var val = $(this.ui.ageAnnuitization).val();
    this.model.set({'ageAnnuitization': val});
}

如您所见，我有一个 fieldChanged 和一个 selectionChnaged；但我不需要这两个。我想精简它并让提交完成所有工作。将数据存储到模型中并将数据设置到模型中。

我的下一个问题与查找每个字段名称有关。如果我有：

名字姓年龄州

做我在这里做的事情的简单方法是什么：

data[field.attr('similarID')] = field.val();

而不是对所有人都使用相似的 ID；我如何使用特定于每个字段的 class 名称而不用 4 行代码做同样的事情？

谢谢

Answer 1

您可以使用 jQuery 的 serializeArray 来收集提交表单时的所有数据。 serializeArray 将 return 表单中所有字段的名称和值对的数组，您可以简单地迭代这些数组值并创建所需的对象，然后将其设置为您的模型。它适用于所有类型的输入类型文本、密码、select 等

serializeArray docs

请参阅下面的工作示例。

$(function () {

    $('#myForm').on('submit', function (e) {
        e.preventDefault();
        var $this = $(this);
        var serializedArray = $this.serializeArray() || [];

        var modelObject = {};
        serializedArray.forEach(function(obj){
            modelObject[obj.name] = obj.value;
        });
        
        console.log(modelObject);
        // Now you can use `modelObject` object to set the model.
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm">
    First Name:
    <input name="fname" />
    <br/>
    Last Name:
    <input name="lname" />
    <br/>
    Select Box:
    <select name="sbox">
        <option value="opt1">Options 1</option>
        <option value="opt2">Options 2</option>
    </select>
    <br/>
    <button type="submit">Submit Form</button>
</form>

JsFiddle Demo

确定字段（在提交事件上）是下拉列表还是输入

Determine if field (on submit event) is a dropdown or a input

javascript

forms

model-view-controller

jquery

backbone.js