如何將HTML表單輸入爲JavaScript對象

我自學JS，並從用戶（名字，中間名，姓氏）獲取輸入並將輸入保存到JS對象（稍後I將操縱對象本身並對其進行分類，檢查重複項等）如何將HTML表單輸入爲JavaScript對象

我已到處尋找並找不到任何方向。我很熟悉將HTML輸入保存爲變量（var n = document.getElementById（'x'）.value），但我對對象來說很陌生。

如何將用戶輸入保存在對象中？我可以在對象中保存多個'提交'，如'從用戶輸入中加載對象'，然後在後面的步驟中操作它？

HTML：

<body> 
    <label>First Name: 
    <input type='text' name='firstName' id='firstName' placeholder="First Name"> 
    </label> 
    <br> 
    <br> 
    <label>Middle Name: 
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name"> 
    </label> 
    <br> 
    <br> 
    <label>Last Name: 
    <input type='text' name='lastName' id='lastName' placeholder="Last Name"> 
    </label> 
    <br> 
    <br> 
    <button type="button" onclick="buildList()">Add to List</button> 
</body>

我想象每次用戶按「添加到列表」計劃又增加了一/中/姓氏列表：

的JS對象的樣子，和

var list = { 
    firstName:"John", 
    middleName:"Will", 
    lastName:"Doe" 
}, 
{ 
    firstName:"Ben", 
    middleName:"Thomas", 
    lastName:"Smith" 
}, 
{ 
    firstName:"Brooke", 
    middleName:"James", 
    lastName:"Kanter" 
};

***注意，後來我打算來算，每個第一/中東/姓氏，並在屏幕上輸出的頻率..即：'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'

我的目標：創建一個LIS全名。將它們分成三個列表：第一個，中間和最後一個名稱。計算每個列表中名稱的頻率。 ---我認爲使用對象是最好的方法。

來源

2015-07-10 jward01

@ jward01這樣的事情？ https://jsbin.com/vaxulusoma/edit?html,js,console,output – bassxzero

@bassxzero不錯的代碼，但你不需要在隱藏輸入中保存對象，你可以使用全局變量。 –

@ shyammakwana.me我意識到這一點，但考慮到OP無法理解在哪裏/如何存儲數據客戶端，我想盡可能使這個清晰/簡單。謝謝你 – bassxzero

你可以使用一個單擊處理像

var list = [], 
 
    $ins = $('#firstName, #middleName, #lastName'), 
 
    counter = { 
 
    firstName: {}, 
 
    middleName: {}, 
 
    lastName: {} 
 
    }; 
 
$('#add').click(function() { 
 
    var obj = {}, 
 
    valid = true; 
 
    $ins.each(function() { 
 
    var val = this.value.trim(); 
 
    if (val) { 
 
     obj[this.id] = val; 
 
    } else { 
 
     var name = this.previousSibling.nodeValue.trim(); 
 
     alert(name.substring(0, name.length - 1) + ' cannot be blank'); 
 
     this.focus(); 
 
     valid = false; 
 
     return false; 
 
    } 
 
    }); 
 
    if (valid) { 
 
    list.push(obj); 
 
    $ins.val(''); 
 

 
    $.each(obj, function(key, value) { 
 
     var count = counter[key][value] || 0; 
 
     counter[key][value] = count + 1; 
 
    }); 
 

 
    } 
 
}); 
 

 
$('#print').click(function() { 
 
    $('pre').text(JSON.stringify(list) + '\n\n'); 
 
    $('pre').append(document.createTextNode(JSON.stringify(counter))); 
 
})

pre { 
 
    white-space: pre-wrap; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<!-- To show result in the dom instead of console, only to be used in the snippet not in production --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label>First Name: 
 
    <input type='text' name='firstName' id='firstName' placeholder="First Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<label>Middle Name: 
 
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<label>Last Name: 
 
    <input type='text' name='lastName' id='lastName' placeholder="Last Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<button type="button" id="add">Add to List</button> 
 
<button type="button" id="print">Print</button> 
 

 
<pre></pre>

來源

2015-07-10 04:21:57

的js對象非常容易操縱（其中許多次使它容易出現更多的錯誤）。如果你想添加一個屬性，只需在其上添加一些值。

var info = {};//create an empty object 
info.firstName = document.getElementById('firstName').value; 
info.lastName = document.getElementById('lastName').value; 
allInfo.push(info);//you had to initialize the array before

來源

2015-07-10 04:24:42

你可以創建一個從輸入的對象（因爲他們在給定的標記看），如：

function buildList(){ 
     var list = {}; 
     $("body").find("input").each(function() { 

      var field= $(this).attr('id'); 
      var value= $(this).val(); 
      list[field] = value; 
     }); 
}

fiddle。

來源

2015-07-10 04:24:46

在他的應用程序中，每次按下按鈕時都會覆蓋firstName屬性值，而不是將其添加到列表並保持計數。 –

如果您的目標是映射每個名稱的頻率，則使用三個哈希值可能是最有效的選項。至於的投入只是一個例子：

這樣，你會喜歡的東西var firstNames = {tom: 3, dick: 10, harry: 2, ...}結束。這裏的一個小提琴：https://jsfiddle.net/n3yhu6as/2/

來源

2015-07-10 04:32:15

有[]和{}之間的差值

的推（）方法和長度屬性僅適用於[]，原因是其實際JavaScript數組

因此在你的情況下，你應該把你的JSON對象放在一個JSON數組中

var list = [{ 
    firstName:"John", 
    middleName:"Will", 
    lastName:"Doe" 
}, 
{ 
    firstName:"Ben", 
    middleName:"Thomas", 
    lastName:"Smith" 
}, 
{ 
    firstName:"Brooke", 
    middleName:"James", 
    lastName:"Kanter" 
}];

如果你喜歡這個，你在你的按鈕單擊事件做代碼

list.push({ 
    firstName: document.getElementById("firstName").value, 
    middleName: document.getElementById("middleName").value, 
    lastName: document.getElementById("lastName").value 
});

來源

2015-07-10 05:04:33

如何搜索從用戶提供的姓名字段特定關鍵字。

var list = [], 
 
    $ins = $('#firstName, #middleName, #lastName'), 
 
    counter = { 
 
    firstName: {}, 
 
    middleName: {}, 
 
    lastName: {} 
 
    }; 
 
$('#add').click(function() { 
 
    var obj = {}, 
 
    valid = true; 
 
    $ins.each(function() { 
 
    var val = this.value.trim(); 
 
    if (val) { 
 
     obj[this.id] = val; 
 
    } else { 
 
     var name = this.previousSibling.nodeValue.trim(); 
 
     alert(name.substring(0, name.length - 1) + ' cannot be blank'); 
 
     this.focus(); 
 
     valid = false; 
 
     return false; 
 
    } 
 
    }); 
 
    if (valid) { 
 
    list.push(obj); 
 
    $ins.val(''); 
 

 
    $.each(obj, function(key, value) { 
 
     var count = counter[key][value] || 0; 
 
     counter[key][value] = count + 1; 
 
    }); 
 

 
    } 
 
}); 
 

 
$('#print').click(function() { 
 
    $('pre').text(JSON.stringify(list) + '\n\n'); 
 
    $('pre').append(document.createTextNode(JSON.stringify(counter))); 
 
})

pre { 
 
    white-space: pre-wrap; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<!-- To show result in the dom instead of console, only to be used in the snippet not in production --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label>First Name: 
 
    <input type='text' name='firstName' id='firstName' placeholder="First Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<label>Middle Name: 
 
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<label>Last Name: 
 
    <input type='text' name='lastName' id='lastName' placeholder="Last Name"> 
 
</label> 
 
<br> 
 
<br> 
 
<button type="button" id="add">Add to List</button> 
 
<button type="button" id="print">Print</button> 
 

 
<pre></pre>

來源

2016-07-09 09:11:05 gaan10

如何將HTML表單輸入爲JavaScript對象

回答

相關問題