Mateo Villagomez Mateo Villagomez - 1 month ago 5
HTML Question

Submission form with input duplicates

I have a button that duplicates two inputs with their own id (i++ and r++ from original). When I submit the form and run:

foreach ($_POST as $id => $value) {
echo $value;
}


process.php page doesn't recognise the new inputs $id or $value.

The duplication code is the following:

document.getElementById('button').onclick = duplicate
var i = 0;
var r = 0;
var items = document.getElementById('items');
var cantidad = document.getElementById('cantidad');
function duplicate() {
var cloneitems = items.cloneNode(false); // "deep" clone
cloneitems.id = "items" + ++r; // there can only be one element with an ID
items.parentNode.appendChild(cloneitems);
var cloneCantidad = cantidad.cloneNode(false); // "deep" clone
cloneCantidad.id = "cantidad" + ++i; // there can only be one element with an ID
cantidad.parentNode.appendChild(cloneCantidad);
}


My html:

<form method="post" action="process.php" enctype="multipart/form-data">
<h4 class="input-margin">Items<button type="button" id="button" onclick="duplicate()" class="btn btn-primary margin-left input-margin">+</button></h4>
<div>
<div class="input-margin">
<div class="col-xs-12 col-sm-6">
// First duplicated input
<select class="input-margin form-control" id="items" placeholder="Nombre" name="item" data-style="btn-primary">
<option></option>
<?php while($row = mysqli_fetch_array($itemResults)) : ?>
<option><?php echo $row['item']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="col-xs-12 col-sm-6">
// Second duplicated input
<input type="number" class="input-margin form-control txtboxToFilter" id="cantidad" placeholder="Cantidad" name="cantidad" min="1">
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 submit-button">
<button type="submit" class="btn btn-primary btn-block" name="submit" value="ingreso">Ingresar</button>
</div>
</form>


The user must have the possibility to use as many duplications as they want. Each of them will have different inputs, thats why I need unique ids to make changes in mysql.

Why is the new id not being showed or recognise, and is there any better way to get all the values from the duplicated inputs?

Answer

Form fields are posted with their names, not their ID. So each of the appended input will overwrite the others. Differentiate the name and you will get each. Or you can give these input an array as name: name="cantitad[]" and you will get one array with all the values.