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

Question

我正在通过 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++;
});

问题是，当尝试从 PHP 中的这些字段中获取值时，它只获取第一组，即，

Array
   (
    [0] => Array
        (
        [item_name] => Neil
        [item_size] => 
        [item_url] => 
        [item_colour] => 
        [item_additional_instructions] => 
        [item_quantity] => 5
    )
)

如果我在 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);
}

如果你们想看这个问题的实时版本，这里是： Live Version
我已将“print_r()”用于调试目的。

请在这方面指导我。

提前致谢。

Answer 1

你可以做更小的数组并匹配索引，而不是包含数组的大数组。

name="items_name[]"

name="items_additional[]"

//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],

    ....
 ];

}

清理你的代码尝试一下： 变量 y = 1; 变量 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++; 

});

这只是让它更干净

Answer 2

请在此处找到代码：http://phpfiddle.org/main/code/g59b-4vq2 对所提供代码的轻微修改。

它有一个错误： jQuery('#item-main-wrap').append('Item '+ x +''... x 从未定义过。

只需修复此错误，您的代码（此处提供）即可完美运行。但是，在您提供的链接中，关联数组在第一个表单块之后没有正确构建。