Question

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

这是我正在搞乱的代码：

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;我怎样才能使用特定于每个字段的类名，而不是让4行代码做同样的事情呢？

由于

Answer 1

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

<强> serializeArray docs

请参阅下面的woking示例。

$(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

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

1 个答案: