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模型（在本例中为您的Contact对象）与演示文稿分开。您的代码包含大量HTML操作，可以卸载到knockout中，它将使用数据绑定为您提供此功能。

例如，它需要一个模型，它需要一个视图（带有数据绑定配置的HTML）并将它们绑定在一起以创建输出。模型更改时，视图会自动更新，当视图上的字段发生更改时，模型会自动更新。

这种双向绑定使您可以清楚地分离关注点和不包含（或不应包含）任何直接修改HTML文档的JavaScript的干净代码（例如document.getElementById / document.createElement etc ...）

我是否可以建议您阅读淘汰赛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操作，这可能看起来有些陌生，但它会显着简化您的客户端浏览器开发。

更详细：

您查看的模型包含名为＆＃34; observables＆＃34;这些基本上是包含模型值的对象，包括对象列表（observableArray）。当他们的价值观发生变化时，他们也会提出改变的事件。

您的视图然后绑定到这些可观察对象，例如从文本框

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

数据绑定属性包含knockout的绑定配置，在此示例中，它告诉knockout将文本框的值绑定到 contactReference observable。这意味着对此控件的任何文本更改都会写入observable，然后observable会通知其已更改的其他组件。副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（Model-View-ViewModel），在这里有更高层次的描述：

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

如何从HTML表单获取用户输入并将其存储在现有JavaScript数组中

1 个答案: