Envio de clone de formulário (html/javascript) por php

evandrosx · 7 de fevereiro de 2017

Boa noite pessoal. Sou iniciante em programação e estou com um problema e gostaria de saber se alguém pode me ajudar.

Eu criei um formulário para o cliente fazer o pedido de um produto e criei um botão nele em javascript para o cliente ir adicionando o campo produto e quantidade quantas vezes ele quiser para ele poder pedir mais produtos. O problema é que não to sabendo como enviar o que é gerado pelo javascript por php. Não to sabendo fazer isso. Cheguei perto com um código mas o arquivo chega todo bagunçado na parte do javascript referente ao clone que ele criou e o campo quantidade não é enviado por nada.

Se alguem puder me ajudar com isso agradeceria muito.... Só falta isso para eu finalizar as funcões do formulário.

Ah... o formulário esta funcionando corretamente, a parte de nome, empresa, telefone... esta enviando por email e chegando perfeitamente. O primeiro quantidade e produto também chegam perfeitamente, mas os clones adicionados pelo botão novo produto eu ja tentei varios metodos e nenhum funciona bem.

Segue meu código abaixo. Vou copiar o código todo para ficar claro. É um formulário simples, não tem muito mistério. Eu é que sou novo e estou meio perdido.

HTML com javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Order</title>
    <link rel="stylesheet" href="formstyle.css"/>

    <script>
        function addInput(divName) {
            var copy = document.getElementById('forclone').cloneNode(true);
            document.getElementById(divName).appendChild(copy);
        }

    </script>



    <style>
        h1 {
            font-family: "Arial Black";
            font-size: 20pt;
            color: green;
            text-shadow: 2px 2px 2px black;
        }

        body {
            text-align: center;
        }

    </style>

</head>
<body>
<div id="interface">

    <header id="header">
        <hgroup>
            <h1>Online Order</h1>
            <h2>Do your order online now</h2>
        </hgroup>
    </header>

    <form method="post" id="onlineorder" action="sendform.php">

        <fieldset id="user"> <legend> IDENTIFICATION </legend>
            <p><label for="name">Name:<span style="color:red">*</span></label>&nbsp;<input type="text" name="name" id= "name" size="32" maxlength="40" placeholder="Enter your name" required/></p>
            <p><label for="business">Business:<span style="color:red">*</span></label>&nbsp;<input type="text" name="business" id= "business" size="30" maxlength="60" placeholder="Enter your business name" required/></p>
            <p><label for="email">Email:<span style="color:red">*</span></label>&nbsp;<input type="email" name="email" id= "email" size="32" maxlength="60" placeholder="Enter your email" required/></p>
            <p><label for="phone">Phone:</label>&nbsp;<input type="text" name="phone" id= "phone" size="32" maxlength="40" placeholder="Enter your phone number" /></p>
        </fieldset>

        <p></p>

        <fieldset id="listproducts">  <legend> PRODUCTS </legend>
            <div id = 'forclone'>
                <select name="product" id="product">
                    <optgroup label="GALLON BAG">
                        <option>GALLON BAG BANANA SPLIT</option>
                        <option>GALLON BAG BIRTHDAY CAKE</option>
                        <option>GALLON BAG COTTON CANDY</option>
                        <option>GALLON BAG CHOC. COOKIE DOUGH</option>
                        <option>GALLON BAG CHOCOLATE</option>
                        <option>GALLON BAG COOKIE N` CREAM</option>
                        <option>GALLON BAG MINT CHOCOLATE</option>
                        <option>GALLON BAG STRAWBERRY</option>
                        <option>GALLON BAG VANILLA</option>
                        <option>GALLON BAG RAINBOW ICE</option>
                        <option>GALLON BAG IC - LIBERTY</option>
                        <option>GALLON BAG STRAWBERRY CCY</option>
                        <option>GALLON BAG CANDY BAR CRUNCH</option>
                        <option>GALLON BAG CRML BROWNIE SUNDAE</option>
                        <option>GALLON BAG BUBBLE GUM</option>
                        <option>GALLON BAG MOOSE TRACKS</option>
                        <option>GALLON BAG ROCKIN CHERRY ICE</option>
                        <option>GALLON BAG GOLD COOKIES & CREAM</option>
                        <option>GALLON BAG REDBERRY SHERBET</option>
                    </optgroup>

                    <optgroup label="PRE-CUP">
                        <option>PRE-CUP BANANA SPLIT</option>
                        <option>PRE-CUP CHOCOLATE</option>
                        <option>PRE-CUP COTTON CANDY</option>
                        <option>PRE-CUP CHOC CHIP COOKIE DOUGH</option>
                        <option>PRE-CUP COOKIES N CREAM</option>
                        <option>PRE-CUP RAINBOW ICE</option>
                    </optgroup>

                    <optgroup label="PRE-PACK">
                        <option>PREPACK MINT CHOCOLATE</option>
                        <option>PREPACK REDBERRY SHERBET</option>
                        <option>YODOTS BLUE COTTON CANDY</option>
                        <option>YODOTS CHOCOLATE COOKIE DOUGH</option>
                        <option>YODOTS COOKIES 'N CREAM</option>
                        <option>YODOTS CHOCOLATE VANILLA</option>
                        <option>PREPACK BIRTHDAY CAKE</option>
                        <option>PREPACK BANANA SPLIT</option>
                        <option>PREPACK COTTON CANDY</option>
                        <option>PREPACK CHOC CHIP COOKIES DOUGH</option>
                        <option>PREPACK CHOCOLATE</option>
                        <option>PREPACK COOKIES N CREAM</option>
                        <option>PREPACK RAINBOW ICE</option>
                        <option>PREPACK STRAWBERRY</option>
                        <option>PREPACK VANILLA</option>
                    </optgroup>

                    <optgroup label="CUPS">
                        <option>3.05oz LOGO CUPS (1000/CASE)</option>
                        <option>5oz LOGO CUPS (1000/CASE)</option>
                        <option>9oz PARFAIT CUPS (1000/CASE)</option>
                        <option>12oz PARFAIT CUPS (2500/CASE)</option>
                        <option>1/2oz SAMPLES CUPS (2500/CASE)</option>
                    </optgroup>
                </select>

                &nbsp;<label for="quantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="quantity" id="quantity" placeholder="Qnt" min="0" max="9999" required/>
            </div>

            <div id="dynamicinput"></div>
            <input type="button" value="New Product" onclick="addInput('dynamicinput');" />
        </fieldset>



        <p></p>
        <p></p>
        <p></p>
        <input type="submit" value="SUBMIT">
    </form>
</div>
</body>
</html>

PHP

<?php

if(isset($_POST['email'])) {



    $email_to = "[email protected]";

    $email_subject = "[ Online Order ]";


    $email = '';
    for($i = 1; isset($_POST['product'.$i]); $i+=1){
        $email .= $_POST['product'.$i];
    }

    $eemail = '';
    for($i = 1; isset($_POST['quantity'.$i]); $i+=1){
        $eemail .= $_POST['quantity'.$i];
    }


    function died($error) {


        echo "We are very sorry, but there were error(s) found with the form you submitted. ";

        echo "These errors appear below.<br /><br />";

        echo $error."<br /><br />";

        echo "Please go back and fix these errors.<br /><br />";

        die();

    }



    if(!isset($_POST['name']) ||

        !isset($_POST['business']) ||

        !isset($_POST['email']) ||

        !isset($_POST['phone']) ||

        !isset($_POST['quantity']) ||

        !isset($_POST['product'])) {

        died('We are sorry, but there appears to be a problem with the form you submitted.');

    }



    $name = $_POST['name']; // required

    $business = $_POST['business']; // required

    $email_from = $_POST['email']; // required

    $phone = $_POST['phone']; // not required

    $quantity = $_POST['quantity']; // required

    $product = $_POST['product']; // not required



    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if(!preg_match($email_exp,$email_from)) {

        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

    }


    if(strlen($error_message) > 0) {

        died($error_message);

    }

    $email_message = "<strong>You received an online order. <br>Follow below the informations.</strong><br><br>\n\n";



    function clean_string($string) {

        $bad = array("content-type","bcc:","to:","cc:","href");

        return str_replace($bad,"",$string);

    }



    $email_message .= "<br><strong>Name: </strong>".clean_string($name)."\n";

    $email_message .= "<br><strong>Business: </strong>".clean_string($business)."\n";

    $email_message .= "<br><strong>Email: </strong>".clean_string($email_from)."\n";

    $email_message .= "<br><strong>Phone: </strong>".clean_string($phone)."\n";

    $email_message .= "<br><br><strong>ORDER: </strong>\n";

    $email_message .= "<br><br><strong>Qty: </strong>".clean_string($quantity)."\n";

    $email_message .= "&nbsp;&nbsp;<strong>Product: </strong>".clean_string($product)."\n";

    $email_message .= "<br><br><strong>Qty: </strong>".clean_string($eemail)."\n";

    $email_message .= "&nbsp;&nbsp;<strong>Product: </strong>".clean_string($email)."\n";




    $headers = "Content-Type: text/html; charset= UTF-8 \r\n";
    $headers .= 'From: '.$email_from."\r\n".

        'Reply-To: '.$email_from."\r\n" .

        'X-Mailer: PHP/' . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);

    ?>


    <p>Thank you for order. We will contact you as soon as possible.</p>
    <p>You can close this page now.</p>


    <?php

}

?>

joseph_dev · 7 de fevereiro de 2017

Opa!

Cara, eu acredito que o conflito seja por causa do atributo name de cada elemento que você está clonando. Todos tem o mesmo valor no atributo name, e isso causa conflito no html. Eu acredito que seja isso. Você vai ter que gerar os elementos de outra forma dinâmica, pode ser adicionando um contador junto ao nome a cada elemento criado só para diferenciar cada um. Os items do select você pode adicionar dinamicamente também.

evandrosx · 7 de fevereiro de 2017

@joseqfneto e aí tudo bom?

Poderia me dar um exemplo de como isso ficaria? Eu tentei alguns metodos aqui mas não tive sucesso.

joseph_dev · 7 de fevereiro de 2017

Cara, fiz rápido aqui... testa ai pra ver se você entende. Estou adicionando apenas o select de produtos de forma dinâmica com o name diferente. A partir dai você desenrola. Substitua seu javascript por esse:

var copias = 1;
function addInput(divName) {
  var novo = '<select name="product'+copias+'">';
  novo += document.getElementById('product').innerHTML;
  novo +='</select>';
  document.getElementById(divName).innerHTML += novo;
  copias++;
}

DiF · 7 de fevereiro de 2017

Ou pode criar um vetor no input.

por exemplo:

<input type="text" name="produtos[]" />

E no php fazer um iterador de arrays com o foreach.

$produtos = $_POST['produtos'];

foreach( $produtos as $produto ) :
  echo $pruduto.'<br />';
endforeach;

evandrosx · 7 de fevereiro de 2017

Primeiramente queria agradecer a ajuda. Somente para resumir o meu problema esta sendo em envio dos dados clonados pelo javascript por php.

@joseqfneto Não deu certo porque quando eu peço um novo produto ele apaga as escolhas anteriores. E não alterou muito o que estou precisando que é enviar.

@DiF Não deu certo. chegou assim por email para mim -> Qty: Array Product: Array.

Segue abaixo os códigos que alterei. Posso ter feito algo errado.

JavaScript

        var runningproducttally = 1;

        function addInput(divName) {
            var copy = document.getElementById('forclone').cloneNode(true);
            var select1 = copy.getElementsByTagName('select')[0];
            select1.setAttribute("name", "product" + runningproducttally);
            document.getElementById(divName).appendChild(copy);
            runningproducttally++;
        }

PHP

	$name = $_POST['name']; // required

    $business = $_POST['business']; // required

    $email_from = $_POST['email']; // required

    $phone = $_POST['phone']; // not required

    $quantity = $_POST['quantity']; // required

    $product = $_POST['product']; // not required

    foreach( $product as $produto ) :
        echo $pruduto.'<br />';
    endforeach;

    $email_message .= "<br><br><strong>Qty: </strong>".clean_string($quantity)."\n";

    $email_message .= "&nbsp;&nbsp;<strong>Product: </strong>".clean_string($product)."\n";

HTML

        <fieldset id="listproducts">  <legend> PRODUCTS </legend>
            <div id = 'forclone'>
                &nbsp;&nbsp;<select name="product[]" id="product[]">
                <optgroup label="GALLON BAG">
                   <option>GALLON BAG BANANA SPLIT</option>
                    <option>GALLON BAG BIRTHDAY CAKE</option>
                    <option>GALLON BAG COTTON CANDY</option>
                      </optgroup>
            </select>
                <select name="quantity[]" id="quantity[]">
                    <optgroup label="Qty">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                      </optgroup>
            </select>

DiF · 7 de fevereiro de 2017

@evandrosx Agora olhando seu código eu já vejo ali 2 erros.

em ID não se coloca array.

e está faltando os values do select

Fora isso, achei que você estava querendo fazer com o input do tipo text. mas como é um campo select... Nesse caso você pode tornar o select de produtos como multi-select.

O lance é fazer o seguinte:

Usar estes selects, para inserir os dados em um array jquery e envia-los por requisição assíncrona para o php

Você pode tentar fazer algo como pegar o valores de cada select, criar um array de dados e enviar por GET ao php por ajax...

Ou criar tipo uma lista de produtos e depois um botão para confirmar os pedidos... Deixo um exemplo quase funcional... Quase, porque ainda precisa implementar a parte de enviar ao php.. por meio de ajax... mas isso eu deixo para você!

veja o exemplo: https://jsfiddle.net/dife/pekbn0b1/

evandrosx · 8 de fevereiro de 2017

@DiF Sensacional, fico 10 vezes melhor do que estava é exatamente o que eu preciso.... mas eu não sabia fazer kkkkk.... Muito obrigado...

Eu ja alinhei com o resto do formulário, adicionei todos os produtos e coloquei o jquerry p rodar. agora é a missão do ajax...

Dei uma pesquisada e seria algo assim? Em data eu coloco lista_final? Estou começando em programação. Não entendo muito de PHP e Ajax nada. Não ria se falei algo ridiculo kkkkkk....

$.ajax({             
       type: "POST",
       data: { lista_final },             
       url: "sendform.php",
      dataType: "html"           
    });

Como recebo isso em PHP?

    $quantity = $_POST['quantity'];

    $product = $_POST['product']; 


or 

$lista_final = $_POST['lista_final'];

---


function clean_string($string) {

        $bad = array("content-type","bcc:","to:","cc:","href");

        return str_replace($bad,"",$string);

    }

    $email_message .= "<br><br><strong>Qty: </strong>".clean_string($quantity)."\n";

    $email_message .= "&nbsp;&nbsp;<strong>Product: </strong>".clean_string($product)."\n";

or

$email_message .= $lista_final

DiF · 8 de fevereiro de 2017

@evandrosx Não tem por que rir de falta de conhecimento amigo. Estamos aqui para ajudar.

Então, seria praticamente isso.

Só lembre que o lista_final seria um array de dados, então no php tem que fazer a iteração deles com foreach!

porque se não iria enviar só um dado e não todos!

Não tenho certeza de como ficará no final, faz muito tempo que não mexo com isso... mas você pode tentar serializar seu form quando for enviar mandar tudo junto.

Por exemplo seu form tem um id de "form_pedidos"

para serializar ele basta fazer: $("#form_pedidos").serialize();

MAS talvez, seja interessante passar como jSON ao php..

Por exemplo:

$.ajax({
    type: "POST",
    url: "arquivo.php",
    dataType: "json",
    data: JSON.stringify({ pedidos: lista_final }) 
}).done(function(data){
     alert(data);
});

Note que esse exemplo acima é para mandar somente o array serializado dos pedidos.

No momento não consigo me recordar de como enviar mais dados alem do array.. por isso que eu sugeri o serialize(), por que aí você pega todos os dados do formulário e envia serializado.

No PHP,

você recebe os pedidos com este parâmetro..

$pedidos = $_POST["pedidos"];


foreach($pedidos as $lista_pedidos):
    echo $lista_pedidos . "<br/>";
endforeach;

seria por aí a coisa... O lance é pesquisar bastante até zerar os neurônios!

Referências:

http://stackoverflow.com/questions/8890524/pass-array-to-ajax-request-in-ajax

http://www.w3schools.com/jquery/ajax_serializearray.asp

http://stackoverflow.com/questions/10398783/jquery-form-serialize-and-other-parameters

http://stackoverflow.com/questions/14846496/send-array-with-ajax-request-to-php

Para finalizar um exemplo de envio de vários dados em conjunto com arrays... da mesma forma que mencionei usando JSON: http://jsfiddle.net/sxGtM/3/

Se combinar tudo aquilo que mostrei com este último exemplo, é possível que você chegue no resultado desejado!

Boa sorte

evandrosx · 9 de fevereiro de 2017

@DiF Não consegui... Eu clico no botão enviar que haviamos criado anteriormente e não funciona, eu criei um novo botão em baixo como o exemplo que me deu do JSON. clico nele e nada acontece.

Da uma olhada por favor, ele ta hospedado aqui como teste - link

Segue abaixo como esta o codigo html e php que to usando.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Order</title>
    <link rel="stylesheet" href="formstyle.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $.fn.serializeObject = function()
        {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        $(function() {
            $('form').submit(function() {
                $('#result').text(JSON.stringify($('form').serializeObject()));
                return false;
            });
        });


        //codigo de criação da lista de pedidos


        $(document).ready(function(){
            $(".btn").on('click', function(e){
                e.preventDefault();

                //armazena os valores vindo do select
                var product = $('#product').val();
                var qtd = $("#quantity").val();

                //array vazio
                var compras  = [];

                //insere o produto e a quantidade no array
                compras.push(product);
                compras.push(qtd);

                //cria a linha td com os valores na tabela
                var lista = '<tr><td>' + compras[0] + '</td><td class="qtd">'+ compras[1] + '</td></tr>';

                //insere a lista dentro de tbody
                $(".tbl_pedidos > tbody:last-child").append(lista);

                //ação de quando clicar no confirmar pedido
                $(".btn_confirmar").on('click', function(){

                    //cria o vetor de produtos e quantidade
                    var dados = {product: compras[0], quantity: compras[1]};
                    var dados_pedidos = [];

                    //insere cada pedido em um índice do vetor
                    $.each(dados, function( produtos, quantidade ) {
                        var data = produtos + ":" + quantidade;
                        dados_pedidos.push(data);
                    });

                    //unifica o vetor de pedidos
                    var lista_final = dados_pedidos.join(", ");

                    //mostra o que seria enviado por ajax
                    alert(lista_final);


                    // sistema de envio ajax

                    $.ajax({
                        type: "POST",
                        url: "sendform.php",
                        dataType: "json",
                        data: JSON.stringify({ pedidos: lista_final })
                    }).done(function(data){
                        alert(data);
                    });
                });
            });
        });
    </script>



    <style>
        h1 {
            font-family: "Arial Black";
            font-size: 20pt;
            color: red;
            text-shadow: 2px 2px 2px black;
        }

        body {
            text-align: center;
        }

        table {
            width: 400px;
            text-align: left;
            font-size: 10pt;
            font-family: sans-serif;

        }
    </style>

</head>
<body>
    <div id="interface">

        <header id="header">
            <hgroup>
                <h1>Online Order</h1>
            </hgroup>
        </header>

        <form method="post" id="onlineorder" action="testform.php">

            <fieldset id="user"> <legend> IDENTIFICATION </legend>
                <p><label for="name">Name:<span style="color:red">*</span></label> <input type="text" name="name" id= "name" size="32" maxlength="40" placeholder="Enter your name" required/></p>
                <p><label for="business">Business:<span style="color:red">*</span></label> <input type="text" name="business" id= "business" size="30" maxlength="60" placeholder="Enter your business name" required/></p>
                <p><label for="email">Email:<span style="color:red">*</span></label> <input type="email" name="email" id= "email" size="32" maxlength="60" placeholder="Enter your email" required/></p>
                <p><label for="phone">Phone:</label> <input type="text" name="phone" id= "phone" size="32" maxlength="40" placeholder="Enter your phone number" /></p>
            </fieldset>

            <p></p>

    <fieldset id="listproducts">
        <legend> SELECT PRODUCTS </legend>
        <div id = 'forclone'>
            <select name="product" id="product">
                <optgroup label="GALLON BAG">
                    <option>GALLON BAG BANANA SPLIT</option>
                    <option>GALLON BAG BIRTHDAY CAKE</option>
                    <option>GALLON BAG COTTON CANDY</option>
                    <option>GALLON BAG CHOC. COOKIE DOUGH</option>
                    <option>GALLON BAG CHOCOLATE</option>
                    <option>GALLON BAG COOKIE N` CREAM</option>
                    <option>GALLON BAG MINT CHOCOLATE</option>
                    <option>GALLON BAG STRAWBERRY</option>
                    <option>GALLON BAG VANILLA</option>
                    <option>GALLON BAG RAINBOW ICE</option>
                    <option>GALLON BAG IC - LIBERTY</option>
                    <option>GALLON BAG STRAWBERRY CCY</option>
                    <option>GALLON BAG CANDY BAR CRUNCH</option>
                    <option>GALLON BAG CRML BROWNIE SUNDAE</option>
                    <option>GALLON BAG BUBBLE GUM</option>
                    <option>GALLON BAG MOOSE TRACKS</option>
                    <option>GALLON BAG ROCKIN CHERRY ICE</option>
                    <option>GALLON BAG GOLD COOKIES & CREAM</option>
                    <option>GALLON BAG REDBERRY SHERBET</option>
                </optgroup>

                <optgroup label="PRE-CUP">
                    <option>PRE-CUP BANANA SPLIT</option>
                    <option>PRE-CUP CHOCOLATE</option>
                    <option>PRE-CUP COTTON CANDY</option>
                    <option>PRE-CUP CHOC CHIP COOKIE DOUGH</option>
                    <option>PRE-CUP COOKIES N CREAM</option>
                    <option>PRE-CUP RAINBOW ICE</option>
                </optgroup>

                <optgroup label="PRE-PACK">
                    <option>PREPACK MINT CHOCOLATE</option>
                    <option>PREPACK REDBERRY SHERBET</option>
                    <option>YODOTS BLUE COTTON CANDY</option>
                    <option>YODOTS CHOCOLATE COOKIE DOUGH</option>
                    <option>YODOTS COOKIES 'N CREAM</option>
                    <option>YODOTS CHOCOLATE VANILLA</option>
                    <option>PREPACK BIRTHDAY CAKE</option>
                    <option>PREPACK BANANA SPLIT</option>
                    <option>PREPACK COTTON CANDY</option>
                    <option>PREPACK CHOC CHIP COOKIES DOUGH</option>
                    <option>PREPACK CHOCOLATE</option>
                    <option>PREPACK COOKIES N CREAM</option>
                    <option>PREPACK RAINBOW ICE</option>
                    <option>PREPACK STRAWBERRY</option>
                    <option>PREPACK VANILLA</option>
                </optgroup>

                <optgroup label="CUPS">
                    <option>3.05oz LOGO CUPS (1000/CASE)</option>
                    <option>5oz LOGO CUPS (1000/CASE)</option>
                    <option>9oz PARFAIT CUPS (1000/CASE)</option>
                    <option>12oz PARFAIT CUPS (2500/CASE)</option>
                    <option>1/2oz SAMPLES CUPS (2500/CASE)</option>
                </optgroup>
            </select>

            <select name="quantity" id="quantity">
                <optgroup label="Qty">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>

                </optgroup>
            </select>
            <button class="btn">Add to list</button>
        </div>
    </fieldset>

    <div id="pedidos">
        <fieldset class="pedidos">
            <legend> ORDER LIST </legend>
            <table class="tbl_pedidos">
                <th>Product</th>
                <th>Qty</th>
                <tbody>

                </tbody>
            </table>
        </fieldset>
    </div>
    <button class="btn_confirmar">SUBMIT</button>
            <p><input type="submit" value="SUBMIT TEST2"/></p>
</form>
</body>
</html>

PHP

<?php

if(isset($_POST['email'])) {



    $email_to = "[email protected]";

    $email_subject = "[ Online Order ]";


    function died($error) {


        echo "We are very sorry, but there were error(s) found with the form you submitted. ";

        echo "These errors appear below.<br /><br />";

        echo $error."<br /><br />";

        echo "Please go back and fix these errors.<br /><br />";

        die();

    }



    if(!isset($_POST['name']) ||

        !isset($_POST['business']) ||

        !isset($_POST['email']) ||

        !isset($_POST['phone']) ||

        !isset($_POST['quantity']) ||

        !isset($_POST['product'])) {

        died('We are sorry, but there appears to be a problem with the form you submitted.');

    }



    $name = $_POST['name']; // required

    $business = $_POST['business']; // required

    $email_from = $_POST['email']; // required

    $phone = $_POST['phone']; // not required

    $pedidos = $_POST["pedidos"]; // not required




    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if(!preg_match($email_exp,$email_from)) {

        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

    }


    if(strlen($error_message) > 0) {

        died($error_message);

    }

    $email_message = "<strong>You received an online order. <br>Follow below the informations.</strong><br><br>\n\n";



    function clean_string($string) {

        $bad = array("content-type","bcc:","to:","cc:","href");

        return str_replace($bad,"",$string);

    }



    $email_message .= "<br><strong>Name: </strong>".clean_string($name)."\n";

    $email_message .= "<br><strong>Business: </strong>".clean_string($business)."\n";

    $email_message .= "<br><strong>Email: </strong>".clean_string($email_from)."\n";

    $email_message .= "<br><strong>Phone: </strong>".clean_string($phone)."\n";

    $email_message .= "<br><br><strong>ORDER: </strong>\n";

    foreach($pedidos as $lista_pedidos):
        $email_message =  $lista_pedidos . "<br/>";
    endforeach;

    $headers = "Content-Type: text/html; charset= UTF-8 \r\n";
    $headers .= 'From: '.$email_from."\r\n".

        'Reply-To: '.$email_from."\r\n" .

        'X-Mailer: PHP/' . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);

    ?>


    <p>Thank you for order. We will contact you as soon as possible.</p>
    <p>You can close this page now.</p>


    <?php

}

?>