使用AJAX将DOM加载后生成的可变数量的表单字段保存到后端数据库

Question

我的应用程序上有一个Modal窗口，它使用AJAX按顺序加载数据，并使用JSON格式的AJAX响应结果更新Modal的HTML内容。

我在JSON响应中得到的变量之一是var number_units = 6;，可以是任何数字值。

我需要做的是获取var number_units的值并生成一个包含2 dropdown selection elements的HTML表单，该表单将保存每行的选项值。一行来自var number_units

所以在这个例子中var number_units = 6所以我需要在这个模态中创建6行选择选项。

我在下面的演示中有一些JavaScript，它创建了我的6行选项。

我需要帮助的是下一阶段。我需要发出一个AJAX请求，将6个选项行保存到数据库中。

表格包括：
 每单位行var number_units x 2个选项。
+
表单末尾的2个隐藏表单字段，用于保存订单ID和订单商品ID值。

每个单位行的2个选择选项是：
- 选项1-4的选择 - 选项“none”，“argon”和“neon”

我有2个选项可以将其保存到我的数据库。

1. 转换为JSON字符串并保存在订单数据库表中的1列中。 （保持在m，ind这个数据永远不需要被搜索或任何东西。它只会用于在我的模态中显示并预先填充上面表格中的选择选项）
2. 将每个单位行的选项集保存到新的数据库表中，其中每个单位行都是数据库中的新行/记录。

在这种情况下，任何一个都可以正常工作。

我需要帮助：

下面的代码为我的JavaScript变量number_units中存储的每个数字生成了一行选项。在这个演示中它是6所以我创建了6个单位行。

每个单位行有2个选择选项字段，用于选择1到4之间的数字，另一个用于选择“无”，“氩”或“氖”的值

因此，当单击按钮并使用数据发出AKAX请求时，我需要帮助获取所选值。

然后，我需要转换为JSON并更新订单数据库表并将其插入该表的1列，或者将每个单元行插入新数据库表中的新记录。

如果以前已经将所选值保存到数据库中，我还需要帮助预先填充我的表单。

我知道这看起来有点复杂，所以我可以使用任何我能得到的帮助。

应用程序的工作方式是在应用程序的另一部分，用户选择有多少单位和订单，其中var number_units填充了数字。

接下来，当他们打开包含订单数据的模态窗口时，需要根据他们选择的单位数显示每个单位的选项。

我需要将这些选择保存到DB，下次打开订单Modal时，需要选择已选择的选项。

单位行的内容



演示
http://jsfiddle.net/j5vL8nrj/

HTML

<form id="form">
</form>

JavaScript

// create HTML element and append to parent element
function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}
////////////////////////////////////////////////




// set some vars for use later in hidden form field
var orderId = 123456789;
var orderItemId = 123;

// numjber of rows to create our form selectiopn options for
var number_units = 6;
var unitCounter = 1;

// Get form
var form = document.getElementById('form');


// Iterate number of times set in var number_units
for(var i = 0; i < number_units; i++){

  // Create select element with options 1-4 and assign a class name
  var select1= document.createElement('select');
  select1.className = 'form-control input-sm';

  var s1o1 = document.createElement('option');
  s1o1.value = '1';
  s1o1.text = '1';
  var s1o2 = document.createElement('option');
  s1o2.value = '2';
  s1o2.text = '2';
  var s1o3 = document.createElement('option');
  s1o3.value = '3';
  s1o3.text = '3';
  var s1o4 = document.createElement('option');
  s1o4.value = '4';
  s1o4.text = '4';

  // Append the option elements to the select element
  select1.appendChild(s1o1);
  select1.appendChild(s1o2);
  select1.appendChild(s1o3);
  select1.appendChild(s1o4);  


  // Create select elements for "neon/argon" option and assign it a class name
  var select2= document.createElement('select');
  select2.className = 'form-control input-sm';

  // Create 4 option elements with value and text
  var s2o1 = document.createElement('option');
  s2o1.value = 'none';
  s2o1.text = 'none';
  var s2o2 = document.createElement('option');
  s2o2.value = 'neon';
  s2o2.text = 'neon';
  var s2o3 = document.createElement('option');
  s2o3.value = 'argon';
  s2o3.text = 'argon';

  // Append the option elements to the select element
  select2.appendChild(s2o1);
  select2.appendChild(s2o2);
  select2.appendChild(s2o3);

  // Create a span element with the number of row it is on.
  // in this demo it will be between 1 and 6
  var span1Fragment = create('<span>Unit '+unitCounter+'</span> ');
  form.appendChild(span1Fragment);

  // Append the 2 select elements to the form element
  form.appendChild(select1);
  form.appendChild(select2);

  // create a <br> element between each row of options
  var breakFragment = create('<br>');
  form.appendChild(breakFragment);

  // increment row counter by 1 each iteration
  unitCounter++;

} // end for loop

// create 2 hidden form fields to holder order ID and order item ID and add to end of form.
var hiddenFormField1 = create('<input type="hidden" name="order-id" id="order-id" value="'+orderId+'"><input type="hidden" name="order-item-id" id="order-item-id" value="'+orderItemId+'">');
form.appendChild(hiddenFormField1);