CODEWITHSUNDEEP
javascriptphpjquerylogic
AnumR
AnumR

Reputation: 85

PHP: Values not fetching correctly through jQuery generated dynamic fields

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.

Upvotes: 0

Views: 57

Answers (2)

Parker Dell
Parker Dell

Reputation: 468

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

Upvotes: 1

mulunehawoke
mulunehawoke

Reputation: 41

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.

Upvotes: 0

Related Questions