Javascript PHP：通过jQuery生成的动态字段无法正确获取值

我正在通过jQuery动态生成html字段，它运行良好

这是代码

jQuery(document).ready(function($) {
    var y = 1;
    jQuery('#add-new-item').on('click',function(e) { 
    jQuery('#item-main-wrap').append('<div class="row"> <h3 class="item_count">Item <span class="item_number">'+ x +'</span> <i class="fa fa-close remove-item" id=""></i></h3> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_name]" type="text" class="form-control" value="" placeholder="Item name / description *" id="" required="required" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_size]" type="text" class="form-control" value="" placeholder="Size (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_url]" type="text" class="form-control" value="" placeholder="Item URL *" id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_colour]" type="text" class="form-control" value="" placeholder="Colour (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_additional_instructions]" type="text" class="form-control" value="" placeholder="Additional instructions (e.g. Please gift wrap, one of each colour) " id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_quantity]" type="text" class="form-control" value="" placeholder="Quantity *" id="" required="required" /> </div> </div> <div style="clear: both;"></div> </div>');
    y++;
});

如果我硬编码html中的所有字段，而不是通过jQuery生成它，那么它工作得很好，可以从字段中获取所有值，如下所示

Array
(
  [0] => Array
     (
        [item_name] => sadsa
        [item_size] => 
        [item_url] => sada
        [item_colour] => 
        [item_additional_instructions] => 
        [item_quantity] => dsa
     )
  [1] => Array
     (
        [item_name] => sad
        [item_size] => sad
        [item_url] => sad
        [item_colour] => 
        [item_additional_instructions] => 
        [item_quantity] => sadas
     )
  [2] => Array
     (
        [item_name] => sadsad
        [item_size] => 
        [item_url] => asdsad
        [item_colour] => 
        [item_additional_instructions] => dsad
        [item_quantity] => sada
     )
)

为了获取这些值，我使用下面的方法

if (isset($_POST['submit_request'])) {  
  $personal_shopper_items = $_POST['personal_shopper_item'];
  $count = 2;
  for ( $i = 0; $i < $count; $i++ ) {
    $personal_shopper_items[$i]['item_name'];
  }
  print_r($personal_shopper_items);
}

if（isset（$\u POST['submit\u request']）{
$personal\u shopper\u items=$\u POST['personal\u shopper\u item']；
$count=2；
对于（$i=0；$i<$count；$i++）{
$personal_shopper_items[$i]['item_name']；
}
打印（个人物品）；
}

如果你们想看到本期的实时版本，请点击这里：
我使用“print_r（）”进行调试

请在这方面指导我

---

提前感谢。

您可以使用较小的数组并在索引上进行匹配，而不是使用包含数组的大数组

name=“项目名称[]”

name=“项目\附加[]”

要清理代码，请尝试以下操作： 变量y=1； var x=1

$('#add-new-item').on('click', function(e){


    var html = '<div class="row"> <h3 class="item_count">Item <span class="item_number">'+ x +'</span> <i class="fa fa-close remove-item" id=""></i></h3> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_name]" type="text" class="form-control" value="" placeholder="Item name / description *" id="" required="required" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_size]" type="text" class="form-control" value="" placeholder="Size (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_url]" type="text" class="form-control" value="" placeholder="Item URL *" id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_colour]" type="text" class="form-control" value="" placeholder="Colour (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_additional_instructions]" type="text" class="form-control" value="" placeholder="Additional instructions (e.g. Please gift wrap, one of each colour) " id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_quantity]" type="text" class="form-control" value="" placeholder="Quantity *" id="" required="required" /> </div> </div> <div style="clear: both;"></div> </div>';

    $('#item-main-wrap').append(html);

    y++; 

});

$（'addnewitem'）。在（'click'，函数（e）{
var html='Item'+x+''；
$（“#项目主包装”）.append（html）；
y++；
});

---

这只会使它更干净

请在此处找到代码：对提供的代码进行了轻微修改

但它有一个错误： jQuery（“#item main wrap”）.append（'item'+x+''…x从未定义

---

只要修复此错误，您的代码（此处提供）就可以正常工作。但是，在您提供的链接中，关联数组在第一个表单块之后没有正确构建。

非常感谢@Parker；）请查看我在帖子中编辑的内容，以清理您的代码。它只是让它更容易阅读。如果你真的想变得更花哨，你可以通过ajax获得你要添加的html（hanks@mulunehawoke；）

//no need to place count in it, it will be indexed on submit if you give 
it type array    

//then do:

$data = [];

foreach($_POST['names'] $index=>$value){

 $data[] = [

    'name'=>$value,

    'additional_items'=>$_POST['items_additional][$index],

    ....
 ];

}

$('#add-new-item').on('click', function(e){


    var html = '<div class="row"> <h3 class="item_count">Item <span class="item_number">'+ x +'</span> <i class="fa fa-close remove-item" id=""></i></h3> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_name]" type="text" class="form-control" value="" placeholder="Item name / description *" id="" required="required" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_size]" type="text" class="form-control" value="" placeholder="Size (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_url]" type="text" class="form-control" value="" placeholder="Item URL *" id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_colour]" type="text" class="form-control" value="" placeholder="Colour (if applicable)" id="" /> </div> </div> <div style="clear: both;"></div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_additional_instructions]" type="text" class="form-control" value="" placeholder="Additional instructions (e.g. Please gift wrap, one of each colour) " id="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input name="personal_shopper['+y+'][item_quantity]" type="text" class="form-control" value="" placeholder="Quantity *" id="" required="required" /> </div> </div> <div style="clear: both;"></div> </div>';

    $('#item-main-wrap').append(html);

    y++; 

});