Javascript data array for PHP

Question

Good night, it’s easy for many, but I’m not getting it right.

I have an order page to which I have a field with the products and the amount of each, when clicking add it shows in a div a "preview" of the orders and the values.

When I click to submit the request, it only sends what is in the selection dropdown and not the whole list.

I wanted to know how I send this whole list of products to the php page that will be responsible for handling this data.

Follow the form I’m using http://bootsnipp.com/snippets/featured/payment-form-with-total-preview

There are the html and js files

Someone can help me?

Thank you very much, everyone, have a good night.

Answer 1

If what you have assembled is in accordance with what this link demo, the addition of the products is being made only at the document level, IE, Javascript is creating elements in Runtime.

Now, when you submit a form, it is necessary to understand that the only values that will constitute the order payload are the inputs and selects by name that exist on the form.

As you describe your problem, I am assuming that the form you are using to upload to the server only has the panel on the left side included and that the add button is Submit. Now, this cannot be mounted that way. This add button does not go to the server. In the same way that it is used to trigger DOM manipulation code by Javascript, also you can 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 use Bootstrap (judging by the demo you linked))

This is a rudimentary example of what this demo you showed does:

• Manipulates the DOM via Javascript
• Feeds the form with Runtime inputs
• Sends everything to the server on one single synchronous request

Running the construction, and adding 4 items, we can observe the following in a DOM inspector:

As you can see, Javascript prepared the whole soup. We already have a form with 4 hidden inputs (Hidden), that we can send to the server normally.

Using PHP on the server, and dump the _POST array for this same request, results in the following:

Array
(
    [item1] => teste 1
    [item2] => teste 2
    [item3] => teste 3
    [item4] => teste 4
)

Which proves that all four items were correctly passed to the server. Now you only need to scale the example. Instead of 1 value per line, you should want more.

The important thing to remember is that the addition button is not part of the form that goes to the server and that Javascript can handle the document.

There are other ways to power an order’s payload, but I think you’ll earn more if you can first understand a simple document manipulation like this.