Ajout de lignes dans un formulaire une fonction de saisie semi-automatique interrompt

Question

Dans un formulaire j'ai 2 entrées. Dans la 1ère entrée, j'utilise un datalist que je charge par JSON et la 2ème entrée le remplit automatiquement lorsque la 1ère entrée est changée. Jusqu'à ici tout fonctionne!

Puis j'ai ajouté un bouton Ajouter où j'ajoute les mêmes lignes. Le problème est que parce que j'utilise id pour sélectionner l'entrée, quand j'ajoute la nouvelle ligne j'ai le même id .. Donc, la saisie semi-automatique ne fonctionne pas ..

Comment puis-je résoudre ce problème? Voici le .

counter = 0; 
 
var dataList = document.getElementById('products'); 
 
var jsonOptions = [{ 
 
    "product": "11111", 
 
    "description": "description 1" 
 
}, { 
 
    "product": "22222", 
 
    "description": "description 2" 
 
}, { 
 
    "product": "33333", 
 
    "description": "description 3" 
 
}]; 
 

 
jsonOptions.forEach(function(item) { 
 

 
    var option = document.createElement('option'); 
 

 
    option.value = item.product; 
 
    option.text = item.description; 
 

 
    dataList.appendChild(option); 
 

 

 
    $(function() { 
 
    $('#product').on('change keyup', function() { 
 

 
     var i = this.value; 
 
     var description = ""; 
 
     var productsInBox = 0; 
 

 
     jsonOptions.forEach(function(a) { 
 
     if (a.product == i) { 
 
      description = a.description; 
 
      productsInBox = a.productsInBox; 
 
     } 
 
     }); 
 
     $('#description').val(description); 
 

 

 
    }); 
 
    }); 
 

 
}); 
 

 

 

 
$('#form1') 
 
    // Add button click handler 
 
    .on('click', '.addButtonDED', function() { 
 
    counter++; 
 
    var $template = $('#addLineInDed'), 
 
     $clone = $template 
 
     .clone() 
 
     .removeClass('hide') 
 
     .removeAttr('id') 
 
     .attr('data-index', counter) 
 
     .insertBefore($template); 
 

 
    // Update the name attributes 
 
    $clone 
 
     .find('[name="product"]').attr('name', 'product-' + counter).end() 
 
     .find('[name="description"]').attr('name', 'description-' + counter).end() 
 

 

 
    }) 
 

 
    // Remove button click handler 
 
    .on('click', '.removeButtonDED', function() { 
 
    var $row = $(this).parents('.form-group'), 
 
     index = $row.attr('data-index'); 
 
    counter--; 
 
    // Remove element containing the fields 
 

 
    $row.remove(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="form1" method="post" class="form-horizontal" role="form"> 
 
    <fieldset> 
 

 

 
    <div class="form-group"> 
 
     <div class="col-xs-2"> 
 
     <input type="text" id="product" list="products" class="form-control" name="product-0" /> 
 
     <datalist id="products"></datalist> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
     <input id="description" type="text" class="form-control" name="description-0" /> 
 
     </div> 
 

 

 

 
     <div class="col-xs-1"> 
 
     <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button> 
 
     </div> 
 
    </div> 
 

 

 
    <div id="addLineInDed" class="form-group hide"> 
 
     <div class="form-group"> 
 
     <div class="col-xs-2"> 
 
      <input type="text" id="product" list="products" class="form-control" name="product-0" /> 
 
      <datalist id="products"></datalist> 
 
     </div> 
 

 
     <div class="col-xs-4"> 
 
      <input id="description" type="text" class="form-control" name="description-0" /> 
 
     </div> 
 

 

 
     <div class="col-xs-1"> 
 
      <button type="button" class="btn btn-default removeButtonDED"><i class="fa fa-minus"></i></button> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="col-md-10 "> 
 
     <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button> 
 
    </div> 
 

 
    </fieldset> 
 
</form>

Answer 1

classes d'utilisation, renommer vos SELECS aux valeurs de tableau:

counter = 0; 
 
var dataList = $('.products'); 
 
var jsonOptions = [{ 
 
    "product": "11111", 
 
    "description": "description 1" 
 
}, { 
 
    "product": "22222", 
 
    "description": "description 2" 
 
}, { 
 
    "product": "33333", 
 
    "description": "description 3" 
 
}]; 
 

 
jsonOptions.forEach(function(item) { 
 

 
    var option = '<option value="' + item.product + '">' + item.description + '</option>'; 
 

 
    dataList.append(option); 
 
}); 
 

 
$(function() { 
 
    $('body').on('input', '.product,.products', function() { 
 

 
    var i = this.value; 
 
    var description = ""; 
 
    var productsInBox = 0; 
 

 
    jsonOptions.forEach(function(a) { 
 
     if (a.product == i) { 
 
     description = a.description; 
 
     productsInBox = a.productsInBox; 
 
     } 
 
    }); 
 
    $(this).closest('.form-group').find('.description').val(description); 
 

 

 
    }); 
 
}); 
 

 

 

 

 

 
$('#form1').on('click', '.addButtonDED', function() { 
 
    var $template = $('.form-group:last').clone(true, true).find('input').val('').end() 
 
    .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end() 
 
    .find('i').removeClass('fa-plus').addClass('fa-minus').end(); 
 
    $template.insertAfter('.form-group:last'); 
 
    }) 
 

 
    // Remove button click handler 
 
    .on('click', '.removeButtonDED', function() { 
 
    var $row = $(this).closest('.form-group'); 
 
    $row.remove(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" method="post" class="form-horizontal" role="form"> 
 
    <fieldset> 
 

 

 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <input type="text" list="products" class="form-control product" name="product[]" /> 
 
     <datalist id="products" class="products"></datalist> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <input id="" type="text" class="form-control description" name=" description[]" /> 
 
     </div> 
 

 

 

 
     <div class="col-md-1"> 
 
     <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-10 "> 
 
     <button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button> 
 

 
    </div> 
 

 

 

 
    </fieldset> 
 
</form> 
 

 
</fieldset> 
 
</form>

pour lire les valeurs font une boucle:

foreach($_POST['product'] as $product) { 
//do stuf 
} 

Answer 2

Voyant que vous avez dit que vous avez essayé d'utiliser des classes,

Que diriez-vous encapsuler votre code de sorte que vous aurez une fonction comme ceci: FilldatalistOptions fonction (élément , options)

Vous pouvez alors avoir les 2 datalists avec des ID différents (produits1 et produits2 peut-être). Et il suffit d'appeler la fonction comme ceci:

var dataList1 = document.getElementById('products1'); 
var dataList2 = document.getElementById('products2'); 
FilldatalistOptions(datalist1, jsonOptions); 
FilldatalistOptions(datalist2, jsonOptions);