If what you have set up is according to what this demo of the link, the addition of the products is being done only at document level, ie it is Javascript that is creating elements in runtime .
Now, when submitting a form, you have to understand that the only values that will constitute the payload of the request are the named inputs and selects that exist on the form.
As you describe your problem, I'm assuming that the form you are using to send to the server has only the left-side panel included and the add button is the submit button.
Now this can not be set up in this way. This add button does not go to the server .
Just as it is used to trigger DOM manipulation code by Javascript, you can also create your own inputs.
Consider the following simple construction:
<script type="text/javascript">
var contador = 1;
function adicionarItem() {
var descricao = $("#descricao").val();
var novoinput = $("<input/>")
.attr("type", "hidden")
.attr("name", "item" + contador)
.val(descricao);
var novodiv = $("<div/>")
.html(descricao);
$("#formenviar").prepend(novodiv);
$("#formenviar").append(novoinput);
contador++;
}
</script>
<input id="descricao" type="text"/>
<input type="button" value="adicionar item" onclick="adicionarItem()"/>
<form id="formenviar" method="post" action="qualquer_coisa.php">
<input type="submit" value="enviar tudo para o servidor"/>
</form>
(I'll assume you use jQuery, because I'm assuming you're using Bootstrap (judging by the demo you've linked))
Here's a rudimentary example of what this demo you've shown does:
- Manipulate the DOM via Javascript
- Feed the form with runtime inputs
- Sends everything to the server in a single synchronous request
Running the build, and adding 4 items, we can observe the following in an inspector DOM:
As you can see, Javascript has prepared the whole soup. We already have a form with 4 hidden inputs ( hidden ), which we can send to the server normally.
Using PHP on the server, and dumping the _POST array for this same request, results in the following:
Array
(
[item1] => teste 1
[item2] => teste 2
[item3] => teste 3
[item4] => teste 4
)
That proves that the four items were passed correctly to the server.
Now you just need to scale the example. Instead of 1 value per line, you should want more.
The important thing to keep in mind is that the plus button is not part of the form that goes to the server and that Javascript can handle the document.
There are other ways to feed the payload of a request, but I think you get more if you can first understand simple document manipulation like this.
