将动态文本框的值传递给现有的隐藏字段

Question

试图用一种简单的方式解释一些完全让我难过的东西。我现在已经工作了9个多小时，准备拔掉我的头发。

我有一个表单，包含现有的隐藏元素和许多文本框。

每个文本框都作为模糊事件创建某个div的inner.html，根据输入的值添加一些文本框（参见图片以便澄清。

用于生成文本框的代码如下：

function generate6(count) {
  var i;
  for (i = 0; i < count; i++) {
    ch.innerHTML = ch.innerHTML + "Left Text (size 6):  <
      input type = 'text'
    class = 'txt'
    style = 'width:150px;margin-right:10px;'
    name = 'left' + i > ";

    ch.innerHTML = ch.innerHTML + "Right Text (size 6): <input type='text' 
    class = 'txt'
    style = 'width:150px;margin-right:0px;'
    name = 'right' + i > < br > ";
  }
}

function generate7(count) {
  var j;
  for (j = 0; j < count; j++) {
    ch7.innerHTML = ch7.innerHTML + "Left Text (size 7): <input type='text'
    class = 'txt'
    style = 'width:150px;margin-right:10px;'
    name = 'left' + j > ";
    ch7.innerHTML = ch7.innerHTML + "Right Text (size 7): <input type='text' 
    class = 'txt'
    style = 'width:150px;margin-right:0px;'
    name = 'right' + j > < br > ";
  }
}

这适用于所有尺码，最大尺寸为14。

我还在“添加到购物车”按钮附近的表单上有一个隐藏字段。在提交表单之前，我需要将所有动态文本框的值传递到该隐藏字段中。

此时，我并不关心它是如何工作的，只是确实如此。请帮助我。

Answer 1

你需要：

• 将submit事件的事件处理程序附加到表单
• 获取事件处理程序中的所有输入
• 收集所有这些输入的值
• 使用这些值更新隐藏的输入

HTML

<form id="myform">
  <input type="hidden" name="dynamicInputsCollector">
  <input id="dynamicInput1">
  <input id="dynamicInput2">
  <!-- etc.... -->
</form>

js（使用jQuery的例子）：

var $form = $('#form');
var $dynamicInputCollector = $('#dynamicInputsCollector');

//Attach event handler for 'submit' event
$form.on('submit', function(e) {
  var $dynamicInputs = $("#form :input");
  var allDynamicInputs;
  $dynamicInputs.each(function(dynamicInput) {
    //Concatenate all dynamicInpus into one string (with '-' here as an example)
    allDynamicInputs = allDynamicInputs + '-' + $(dynamicInput).val()
  });
  //Update the hidden field
  $dynamicInputCollector.val(allDynamicInputs);
});