Tabela dinamica e após submit enviar para o e-mail oque foi digitado e mostrar na tabela

JeanTDZ · October 23, 2019

Olá pessoal!

Estou com uma tremenda dificuldade.

Tenho um formulário na qual está funcionando e cadastrando, porém preciso que o meu botão adicionar autorizado funcione e mostre o que foi digitado para o e-mail. As informações na vdd é enviada para o e-mail e o que será enviado é oque será digitado.

Simplificando ->

Tenho um botão que adiciona 2 inputs (NOME E SALDO) e conforme for clicando nesse botão, vai adicionando mais campos.

Dúvida: Como posso fazer com que grave o que foi digitado nesses campos?

Segue o que eu tentei fazer até agora:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chame Taxi PrePago</title>        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="icon" type="image/x-icon" href="https://www.flaticon.com/premium-icon/icons/svg/1361/1361253.svg" />
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <br />
        <div class="container" style="width:100%; max-width:600px">
            <h2 align="center">Pré-Pago</h2>
            <br />
            <div class="panel panel-default">
                <div class="panel-heading"><h4>Registrar</h4></div>
                <div class="panel-body">
                    <form method="post" id="register_form">
                        <?php echo $message; ?>
                        <div class="form-group">
                            <label>Nome Completo</label>
                            <input type="text" name="user_name" style="text-transform:uppercase" class="form-control" pattern="[a-zA-Z ]+" required />
                        </div>
                        <div class="form-group">
                            <label>E-mail</label>
                            <input type="email" name="user_email"  style="text-transform:uppercase" class="form-control" required />
                        </div>
                        <div class="form-group">
                            <label>CEP</label>
                            <input type="text" name="campob" id="cep" value="" maxlength="9" onblur="pesquisacep(this.value);" class="form-control">
                        </div>
                        <div class="form-group">
<table id="myTable" class="table">
<a class="btn btn-primary" onclick="myFunction()" href="#" role="button">Adicionar Autorizado</a>
            <thead>
                <tr>
                    <th>NOME</th>
                    <th>SALDO</th>
                </tr>
            </thead>
        </table>

                        <div class="form-group">
                            <input type="submit" name="register" id="register" value="Validar" class="btn btn-info" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

JAVASCRIPT

    <script>
        var incremento = -1;
        function myFunction() {
            incremento++;
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = "NOME";
            cell2.innerHTML = '<input type="text" name="name1[${incremento}]" >';
            cell3.innerHTML = "SALDO";
            cell4.innerHTML = '<input type="text" name="saldo[${incremento}]" size="15px" >';
        }
    </script>

Gleyson Abreu · October 23, 2019

Não sei se entendi bem o que você mas... se sim:

Você pode usar adicionar os input da seguinte forma:

var incremento = 0;
        function myFunction() {
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            cell1.innerHTML = "NOME";
            cell2.innerHTML = '<input type="text" name="cliente['+incremento+'][nome]" >';
            cell3.innerHTML = "SALDO";
            cell4.innerHTML = '<input type="text" name="cliente['+incremento+'][saldo]" size="15px" >';
        incremento++;
        }

E com o php você conseguiria retornar os valores para enviar e/ou usar onde quiser:

if(isset($_POST['register'])){
	if(!empty($_POST['cliente']) && is_array($_POST['cliente'])){
 		foreach($_POST['cliente'] as $item) {
   			echo $item['nome'].' com valor '.$item['saldo'].'<br />';
	}
		}
}