由Jquery动态创建的数组文本字段仅提交第一个条目

Question

我的DB上有一个带有输入的列的表单。 我在单击带有Jquery的按钮时加载了一个新的INPUT字段，并手动设置它的名称属性和ID值以使用该表单。 当我将表单提交给Controller时，原始输入字段（不是由Jquery生成的）是唯一保存的值。

的HTML

<div class="d-flex flex-column guest_input_fields_wrap w-100">
  <div class="d-flex pb-2 align-items-baseline">
    <input placeholder="e.g. Sunscreen" type="text" multiple="true" name="experience_adventure[guest_bring][]" id="experience_adventure_guest_bring_1">
      <a href="#" class="remove_field">Remove</a>
  </div>
</div>

JQUERY

  var guest_wrapper         = $(".guest_input_fields_wrap"); //Fields wrapper
  var guest_add_button      = $(".new_guest_item"); //Add button ID

  var x = 1; //initlal text box count
  $(guest_add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
      x++; //text box increment
      $(guest_wrapper).append('<div class="d-flex pb-2 align-items-baseline"><input placeholder="e.g. Sunscreen" type="text" name="experience_adventure[guest_bring][]" id="experience_adventure_guest_bring_' + x + '" multiple="true" style="box-shadow:none;"><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
  });

  $(guest_wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
  })

如果我用HTML写出输入而不是用Jquery注入，则表单可以正常工作并将两个输入都发送到array列。

<input placeholder="e.g. Sunscreen" type="text" multiple="true" name="experience_adventure[guest_bring][]" id="experience_adventure_guest_bring_1">

我希望该表单会将包含所有条目的数组发送到控制器，但只会发送第一个。

终端响应（在表格上输入“项目1”）

["guest_bring", "{\"Item 1\"}"]

预期的反应

["guest_bring", "{Item 1, Item 2, Item 3}"]

Answer 1

最终，这比我预期的要简单得多：)。 我在这里找到了一篇博客文章： https : //sanjusoftware.wordpress.com/2011/01/11/dynamically-added-fields-using-ajax-do-not-get-posted-on-form-submission-form-inside -表/

这使我对HTML标记以及表单标签的开始/结束位置有了一些见解。 我意识到我的表单标签没有涵盖页面上部分表单的全部内容。 当我移动开始/结束标记以包含__form部分的整个HTML时，它开始正常工作。