PHP: Values not fetching correctly through jQuery generated dynamic fields

Question

I am generating html fields dynamically through jQuery which is working fine.

Here is the code.

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++;
});

The problem is that while trying to fetch the values from those fields in PHP it only fetching the first group i.e.,

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

And if I hard code all the fields in html instead of generating it through jQuery, it is working fine and fetching all the values from the fields like below.

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

For fetching the values, I am using the below method.

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);
}

In case you guys want to see the live version of this issue, here it is: Live Version
I have used "print_r()" for debugging purpose.

Please guide me in this regards.

Thanks in advance.

Parker Dell · Accepted Answer · 2017-08-14 11:43:22Z

1

instead of on big array containing arrays you could do smaller arrays and match up on indexes.

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

    ....
 ];

}

to clean up your code some try: 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++; 

});

This just makes it cleaner

edited Aug 14, 2017 at 11:43

answered Jul 19, 2017 at 13:58

Parker Dell

4694 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AnumR Over a year ago

Thank you so much @Parker ;)

Parker Dell Over a year ago

check out what i edited in my post to clean up your code some. It just makes it easier to read. If you wanted to get really fancy you would ajax out to get your html that you are appending

mulunehawoke · Accepted Answer · 2017-07-19 14:26:17Z

0

Please find the code here: http://phpfiddle.org/main/code/g59b-4vq2 a slight modification of provided code.

It has one error though: jQuery('#item-main-wrap').append('Item '+ x +''... x is never defined.

Simply fixing this error makes your code(provided here) work perfectly fine. However in the link you provided the associative array is not being properly built after the first form block.

answered Jul 19, 2017 at 14:26

mulunehawoke

413 bronze badges

1 Comment

AnumR Over a year ago

Thanks @mulunehawoke ;)

Collectives™ on Stack Overflow

PHP: Values not fetching correctly through jQuery generated dynamic fields

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related