Jump to content
JeanTDZ

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

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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 />';
	}
		}
}

Saída dos dados:

Citar

Usuario2 com valor 48754
Usuario1 com valor 7487.00

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rjlfurtado
      Segue abaixo o exemplo de como seria feito em SQL:
      CREATE TABLE tabela ( campo1 DOUBLE, campo2 DOUBLE, divisao DOUBLE AS (campo1/campo2) ); Agora eu preciso criar uma migração no Laravel 6, segue exemplo abaixo:
      $table->integer('qtd_saida'); $table->decimal('valor_uni', 8, 2); $table->double('valor_total')->as(qtd_saida * valor_uni);  
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Marxrj
      Olá a todos!,
      Queria aqui uma dica se alguém sabe como alinhar fotos no centro pelo bootstrap.
      Usando o padrão fotos retratos fica como abaixo
      __________  __________
      __________
       
      Mas eu queria que quando tivesse um número impar, a foto não ficasse alinhada na esquerda e sim centralizada como abaixo
      __________  __________
                __________
       
      Estou usando este padrão abaixo aonde ele alinha duas fotos ao lado, mas quando tem somente um ou em número impar, essa não centraliza e sim fica a esquerda.
      <div class="col-xs-12 col-sm-10 col-lg-6 col-md-3">
    • By JoãoRicardo.Lima
      Olá pessoal blz?.
      Estou com problemas para ler um xml, estou pegando ele com simplexml_load_file(), quando eu dou um vardump ele me mostra todas as propriedades e tals, mas quando eu tento pegar a propriedade(exemplo $xml->emit) ele me retorna null, abaixo está o código.
       
      $arquivo = $_FILES['xml_conta']; $xml = simplexml_load_file($arquivo['tmp_name']); var_dump($xml->ide); Já tentei pegar o arquivo direto do diretório mas da no mesmo. Abaixo o meu var_dump().
       
      object(SimpleXMLElement)#2 (3) { ["@attributes"]=> array(1) { ["versao"]=> string(4) "4.00" } ["NFe"]=> object(SimpleXMLElement)#4 (2) { ["infNFe"]=> object(SimpleXMLElement)#6 (9) { ["@attributes"]=> array(2) { ["versao"]=> string(4) "4.00" ["Id"]=> string(47) "NFe51191203927792000132550010003900572477841258" } ["ide"]=> object(SimpleXMLElement)#8 (22) { ["cUF"]=> string(2) "51" ["cNF"]=> string(8) "47825479" ["natOp"]=> string(33) "Venda Terceiros" ["mod"]=> string(2) "50" ["serie"]=> string(1) "1" ["nNF"]=> string(6) "397894" ["dhEmi"]=> string(25) "2019-12-05T18:35:33-04:00" ["dhSaiEnt"]=> string(25) "2019-12-05T18:35:33-04:00" ["tpNF"]=> string(1) "1" ["idDest"]=> string(1) "1" ["cMunFG"]=> string(7) "51074" ["tpImp"]=> string(1) "3" ["tpEmis"]=> string(1) "2" ["cDV"]=> string(1) "5" ["tpAmb"]=> string(1) "2" ["finNFe"]=> string(1) "2" ["indFinal"]=> string(1) "1" ["indPres"]=> string(1) "1" ["procEmi"]=> string(1) "0" ["verProc"]=> string(7) "3.5.1.2" ["dhCont"]=> string(25) "2019-12-05T15:32:22-04:00" ["xJust"]=> string(23) "sem conexao com o sefaz" }  
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.