javascript - 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

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

名称=“items_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],

    ....
 ];

}

要清理你的代码，请尝试:var 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++; 

});

这只会让它变得更干净