確定字段（在提交事件中）是否爲下拉列表或輸入

我的問題是在我名爲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();

而不是使用similarID所有的;我怎樣才能使用每個領域特有的類名，而不是讓4行代碼做同樣的事情？

感謝

來源

2015-06-02 hiquetj

您可以使用jQuery的serializeArray收集形式提交的所有數據。 serializeArray將返回表單中所有字段的名稱和值對的數組，您可以簡單地遍歷這些數組值並創建所需的對象，然後將其設置爲您的模型。和它的作品很好的與所有類型的輸入類型的文本，密碼，選擇等

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

來源

2015-06-02 19:55:03

確定字段（在提交事件中）是否爲下拉列表或輸入

回答

相關問題