value recovery using jQuery - php

Question

I have a concern for recovering value contained in a form (pop-up) in a field of another form (php), the collect value in the field must be in the form of a character string array. when I test my page, the result I got in my field is an array of (undefined: undefined: undefined: ..........) Here is my code:
in PHP:
<div class="form-group col-md-3">
<label>Quantité & Taille*:</label>
<button type="button" class="btn btn-default form-control" data-target="#tailleModal" onclick="jQuery('#tailleModal').modal('toggle');return false;">Quantité & Taille</button>
</div>
<!-- Modal -->
<div class="modal fade" id="tailleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Quantité & Taille</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<?php for($i=1; $i<=12; $i++): ?>
<div class="form-group col-md-4">
<label for="taille <?php echo $i ;?>">Taille:</label>
<input type="text" name="taille <?php echo $i ;?>" id="taille <?php echo $i ;?>" class="form-control">
</div>
<div class="form-group col-md-2">
<label for="taille <?php echo $i ;?>">Quantité:</label>
<input type="number" name="quantite <?php echo $i ;?>" value="" min="0" id="quantite <?php echo $i ;?>" class="form-control">
</div>
<?php endfor; ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="updatetaille();jQuery('#tailleModal').modal('toggle');return false;">Enregistrer Modification</button>
</div>
</div>
</div>
</div>
<div class="form-group col-md-3">
<label for="tailles">Quantité & Taille précédent:</label>
<input type="text" class="form-control" name="tailles" id="tailles" value="<?php echo ((isset($_POST['tailles']))? $_POST['tailles']:'') ;?>" readonly>
</div>
With Ajax
function updatetaille(){
var i,taillecaract='';
var taille=$('#taille'+i).val();
var quantite=$('#quantite'+i).val();
for(var i=1;i<=12;i++){
if (taille!='') {
taillecaract+=taille+':'+quantite+',';
}
}
$('#tailles').val(taillecaract);
}
Thanks for your help.

Answer 1

When I do what you do, the undefined error: undefined is displayed. I show you the result using imageimg of test when I press "Enregistrer Modification"the result displays undefined: undefined ...img of test
thanks for your help.

Answer 2

In your php, where you set ids, like this
id="quantite <?php echo $i ;?>"
remove the space, like this
id="quantite<?php echo $i ;?>"
That should help, because in your javascript you have jquery using selectors like this
var taille=$('#taille'+i).val();
var quantite=$('#quantite'+i).val();
with no space