javascript - 使用添加更多功能时无法更改数组

Question

我有一组字段，它们是表单的一部分，它们的值需要提交到后端 这组字段可以通过“添加更多”功能多次添加。

Code Fiddle

例如 - 以下是我每次使用“添加更多”功能 3 次时添加的一组值

FirstNameOne
LastNameOne
EmailOne
StatusOne

FirstNameTwo
LastNameTwo
EmailTwo
StatusTwo

FirstNameThree
LastNameThree
EmailThree
StatusThree

我在后端得到的结果数组采用以下形式

Array
(
    [0] => FirstNameOne
    [1] => FirstNameTwo
    [2] => FirstNameThree
)
Array
(
    [0] => EmailOne
    [1] => EmailTwo
    [2] => EmailThree
)
Array
(
    [0] => StatusOne
    [1] => StatusTwo
    [2] => StatusThree
)

但是，我想要的数组格式是这样的

Array
(
    [0] => FirstNameOne
    [1] => EmailOne
    [2] => StatusOne
)
Array
(
    [0] => FirstNameTwo
    [1] => EmailTwo
    [2] => StatusTwo
)
Array
(
    [0] => FirstNameThree
    [1] => EmailThree
    [2] => StatusThree
)

谁能帮我解决这个问题

HTML 代码

<div class="input_fields_wrap">  
  <button class="add_field_button_per plusbutton">+</button> 
  <input type="text" name="first_name[]" id="first_name" class="first_name" placeholder="First Name">
  <input type="text" name="last_name[]" id="last_name" class="last_name" placeholder="Last Name"> 
  <input type="text" name="email[]" id="email" class="email" placeholder="Email"> 
  <select name="action[]">
    <option value="Inactive">Inactive</option>
    <option value="to">A</option>
    <option value="cc">B</option>
  </select>
</div>

Answer 1

您需要更改四个元素的初始 name 属性，如下所示:-

name="data[1][]"
name="data[1][]"
name="data[1][]"
name="data[1][]"

然后也更改 jQuery 代码 name 属性:-

$(wrapper).append('<br><input type="text" name="data['+x+'][]" id="first_name" class="first_name" placeholder="First Name"><input type="text" name="data['+x+'][]" id="last_name" class="last_name" placeholder="Last Name"><input type="text" name="data['+x+'][]" id="email" class="email" placeholder="Email"><select name="data['+x+'][]"><option value="Inactive">Inactive</option><option value="to">To</option><option value="cc">CC</option></select>'); //add input box  

工作 fiddle :- https://jsfiddle.net/q52v231u/