如何從HTML表單獲取用戶輸入並將其存儲在現有JavaScript數組中

Question

我有一個表單，我想要獲取用戶輸入並將其作爲數組存儲在JavsScript中的新變量中。

這裏是我的形式：

<form id="contractFormForm"> 
     Contract Reference: <br> 
     <input type="text" name="contractref" id="contractref"> <br> 
     Grower Reference: <br> 
     <input type="text" name="growerref" id="growerref"> <br> 
     Main Group: <br> 
     <input type="text" name="maingroup" id="maingroup"> <br>   
     Item: <br> 
     <input type="text" name="item" id="item"> <br> 
     Quantity Ordered: <br> 
     <input type="text" name="quantity" id="quantity"> <br> 
     Total Price for Order: <br> 
     <input type="text" name="totalprice" id="totalprice"> <br>   
     Delivery Date: <br> 
     <input type="text" name="date" id="date"> <br> <br> 
     <input type="button" value="Add new contract" onclick="readData();"/> 
    </form> 

我想每個表單項的值，並使用它創建一個新的合同，在結構：

var contractX = new Contract(0, "", "", "", 000, "£000", "00/00/00"); 
GC.growerContracts.push(contract1); 

這個新的合同，然後，被推入以下內容：

var GC = { growerContracts: [] }; 

function Contract(ref, grower, group, item, quantity, price, delivery) { 
    this.contract_ref = ("gc" + ref); 
    this.grower_ref = grower; 
    this.main_group = group; 
    this.sub_group = item; 
    this.quantity = quantity; 
    this.total_price = price; 
    this.delivery_date = delivery; 
} 

目前我手動創建合同如下：

var contract1 = new Contract(1, "gr1", "seed", "wheat", 500, "£1234", "01/03/15"); 
GC.growerContracts.push(contract1); 

var contract2 = new Contract(2, "gr2", "seed", "grass", 1250, "£3456", "10/04/15"); 
GC.growerContracts.push(contract2); 

這些然後顯示爲頁面上的表格。表的代碼是：

function addTable(growerContracts) { 
    var contractTable = document.createElement("TABLE"); 
    contractTable.setAttribute("id", "contractTable"); 
    document.body.appendChild(contractTable); 

    for (var i = 0; i < growerContracts.length; i++) { 
    var contract = growerContracts[i]; 
    var row = document.createElement("TR"); 

    var contractRefCell = document.createElement("TD"); 

    var growerRefCell = document.createElement("TD"); 

    var groupCell = document.createElement("TD"); 

    var itemCell = document.createElement("TD"); 

    var quantityCell = document.createElement("TD"); 

    var priceCell = document.createElement("TD"); 

    var deliveryCell = document.createElement("TD"); 

    row.appendChild(contractRefCell); 
    row.appendChild(growerRefCell); 
    row.appendChild(groupCell); 
    row.appendChild(itemCell); 
    row.appendChild(quantityCell); 
    row.appendChild(priceCell); 
    row.appendChild(deliveryCell); 

    var contractRef = document.createTextNode(contract.contract_ref); 

    var growerRef = document.createTextNode(contract.grower_ref); 

    var group = document.createTextNode(contract.main_group); 

    var item = document.createTextNode(contract.sub_group); 

     var quantity = document.createTextNode(contract.quantity); 

     var price = document.createTextNode(contract.total_price); 

     var delivery = document.createTextNode(contract.delivery_date); 

    contractRefCell.appendChild(contractRef); 
    growerRefCell.appendChild(growerRef); 
    groupCell.appendChild(group); 
    itemCell.appendChild(item);  
    quantityCell.appendChild(quantity); 
    priceCell.appendChild(price); 
    deliveryCell.appendChild(delivery); 

    contractTable.appendChild(row); 
    document.body.appendChild(document.createElement('hr')); 
    } 
} 

window.addEventListener('load', function() { 
    addTable(GC.growerContracts) 
}); 

這是我在READDATA功能當前的嘗試 - 錯誤的負載：引用錯誤，它總是要重寫contract5 ...

function readData() { 

var contract5 = new Contract(ref, grower, group, item, quantity, price, delivery); 

contract5.ref = document.getElementById("contractref"); 
contract5.grower = document.getElementById("growerref"); 
contract5.group = document.getElementById("maingroup"); 
contract5.item = document.getElementById("item"); 
contract5.quantity = document.getElementById("quantity"); 
contract5.price = document.getElementById("totalprice"); 
contract5.delivery = document.getElementById("date");  

GC.growerContracts.push(contract5); 

console.log(contract5); 

} 

所以.. 。點擊表單上的按鈕，我想創建一個新的合同，其中的表單值作爲合同的值。

注意;我希望能夠創建多個合同，以便這些合同可以顯示在表格中。

希望這是有道理的。不太清楚如何闡明我的問題，但請詢問你是否不確定我的意思，我會盡量擴大...

Answer 1

如果你想使用一個框架，我可以建議像敲除JS。

http://www.knockoutjs.com

這個框架的目的是分離你的JavaScript模型（在這種情況下，您的聯繫對象）從表現。您的代碼包含大量的HTML操作，可以將它們卸載到淘汰賽中，並使用數據綁定爲您提供此功能。

例如，它需要一個模型，它需要一個視圖（具有數據綁定配置的HTML）並將它們綁定在一起以創建輸出。模型更改時，視圖會自動更新，並且當視圖上的字段更改時，模型會自動更新。

這兩種方式綁定給你明確的關注點和乾淨的代碼，不包含（或不應該包含）任何直接修改HTML文檔的JavaScript（例如document.getElementById/document.createElement等）

我可以建議你閱讀淘汰賽js鏈接，並將其放到上下文中看看這個小提琴演示你使用KnockoutJS後的基本行爲。

http://jsfiddle.net/tt0L6zm0/2/

視圖模型：

var vm = { 
    items: ko.observableArray([]), 
    contactReference: ko.observable(), 
    growerReference: ko.observable(), 
    mainGroup: ko.observable(), 
    item: ko.observable(), 
    quantityOrdered: ko.observable(), 
    totalPrice: ko.observable(), 
    deliveryDate: ko.observable(), 
    addItem: function() { 
    this.items.push({ 
     contactReference: this.contactReference(), 
     growerReference: this.growerReference(), 
     mainGroup: this.mainGroup(), 
     item: this.item(), 
     quantityOrdered: this.quantityOrdered(), 
     totalPrice: this.totalPrice(), 
     deliveryDate: this.deliveryDate() 
    }); 
    } 
} 

ko.applyBindings(vm); 

的觀點：

<form id="contractFormForm">Contract Reference: 
    <br/> 
    <input type="text" data-bind="value: contactReference"> 

    <br/>Grower Reference: 
    <br/> 
    <input type="text" data-bind="value: growerReference"> 

    <br/>Main Group: 
    <br/> 
    <input type="text" data-bind="value: mainGroup"> 

    <br/>Item: 
    <br/> 
    <input type="text" data-bind="value: item"> 
    <br/>Quantity Ordered: 
    <br/> 
    <input type="text" data-bind="value: quantityOrdered"> 

    <br/>Total Price for Order: 
    <br/> 
    <input type="text" data-bind="value: totalPrice"> 

    <br/>Delivery Date: 
    <br/> 
    <input type="text" data-bind="value: deliveryDate"> 

    <br/> 
    <br/> 
    <input type="button" value="Add new contract" data-bind="click: addItem" /> 
</form> 
<table> 
    <thead> 
     <tr> 
      <td>Contact Reference</td> 
      <td>Grower Reference</td> 
      <td>Main Group</td> 
      <td>Item</td> 
      <td>Quantity Ordered</td> 
      <td>Total Price for Order</td> 
      <td>Delivery Date</td> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: items"> 
     <tr> 
      <td data-bind=" text: contactReference "></td> 
      <td data-bind="text: growerReference "></td> 
      <td data-bind="text: mainGroup "></td> 
      <td data-bind="text: item "></td> 
      <td data-bind="text: quantityOrdered "></td> 
      <td data-bind="text: totalPrice "></td> 
      <td data-bind="text: deliveryDate "></td> 
     </tr> 
    </tbody> 
</table> 

這可能看起來有點陌生，如果你是用來直接與DOM操作，但它會顯着簡化您的客戶端瀏覽器開發。

的詳細信息：

您查看模型中包含名爲「可觀」基因敲除的對象，這些基本上都是包含價值爲你的模型，其中包括對象（observableArray）名單的對象。當他們的價值觀發生變化時，他們也會引發變化的事件

你的圖，然後結合至這些可觀測量，例如從文本框

<input type="text" data-bind="value: contactReference"> 

的數據綁定屬性包含用於基因敲除的結合結構，在此實例中其講述敲除結合的值textbox到contactReference observable。這意味着對該控件的任何文本更改都被寫入可觀察對象，然後可觀察對象通知其它已更改的組件。 Vice-Versa通過JavaScript對模型進行的任何更改都會更新UI中的TextBox值，它們被有效地綁定在一起

字段還可以包含事件，例如，該按鈕包含一個點擊綁定，該對象會調用方法視圖模型

<input type="button" value="Add new contract" data-bind="click: addItem" /> 

這將調用哪個是負責把一個新項目插入到數組（自動通知它改變了視圖）視圖模型的的addItem方法：

addItem: function() { 
    this.items.push({ 
     contactReference: this.contactReference(), 
     growerReference: this.growerReference(), 
     mainGroup: this.mainGroup(), 
     item: this.item(), 
     quantityOrdered: this.quantityOrdered(), 
     totalPrice: this.totalPrice(), 
     deliveryDate: this.deliveryDate() 
    }); 

該數組然後通過使用的foreach結合結合到表：

<tbody data-bind="foreach: items"> 

這基本上遍歷在observableArray每個項目，並構建用戶界面。

所有這一切都在頁面加載使用

ko.applyBindings(vm) 

結合視圖模型，視圖一起初始化。

中使用的架構模式在這裏MVVM（模型 - 視圖 - 視圖模型），在這裏一個較高的水平描述：

http://en.wikipedia.org/wiki/Model_View_ViewModel