Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JackJeff

Formulário com campos dinâmicos

Por , em Javascript

Recommended Posts

JackJeff    0

JackJeff
Postado

Boa noite a todos,

Gostaria de obter a ajuda de vocês com a relação a uma dúvida com a criação de um formulário dinâmico.
Não tenho experiência em Javascript e preciso colocar alguns campos dinâmicos em um formulário.

Neste formulário, existem os campos "Produto", "Medidas", "Quantidade" e "Acabamento".
Preciso colocar um botão "Adicionar Produtos" logo abaixo destes campos e quando esse botão for clicado, gostaria que outros campos "Produto", "Medidas", "Quantidade" e "Acabamento" fossem adicionados automaticamente.

Juntamente com o botão "Adicionar Produtos".
Junto com esses novos campos, deve haver o botão "Excluir" para que o cliente possa apagar os campos adicionais se assim desejar.

Se possível, preciso também do PHP para envio deste formulário.

Tenho um código que estou tentando ajustar para este fim, mas ele habilita apenas um campo e não todos os campos que preciso, mas como não tenho experiência, não estou conseguindo resolver.
desde já, agradeço a todos pela ajuda.

Segue o código HTML:

<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
</head>
<body>
<div id="canvas">
<div id="box_wrapper">
<form class="contact-form" method="post" action="">
<h2>Informe seus dados</h2>
<p class="contact-form-name">
<label for="footer-name">Nome<span class="required">*</span></label>
<input type="text" aria-required="true" size="30" value="" name="name" id="footer-name" class="form-control" placeholder="">
</p>
<p class="contact-form-phone">
<label for="footer-telefone">Telefone<span class="required">*</span></label>
<input type="text" aria-required="true" size="30" value="" name="telefone" id="footer-phone" class="form-control" placeholder="">
</p>
<p class="contact-form-email">
<label for="footer-info">E-mail<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
<p class="contact-form-email">
<label for="footer-info">Endereço<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
<div class="col-sm-4">
<p class="contact-form-email">
<label for="footer-info">Complemento<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
</div>
<div class="col-sm-4">
<p class="contact-form-email">
<label for="footer-info">Bairro<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
</div>
<div class="col-sm-4">
<p class="contact-form-email">
<label for="footer-info">Cidade<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
</div>
<div class="container">
<form class="contact-form" method="post" action="">
<div class="col-sm-4">
<p class="contact-form-email">
<label for="footer-info">Produto<span class="required">*</span></label>
<select name="Selecione" class="form-control">
<option>Selecione</option>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
</p>
</div>
<div class="col-sm-4">
<p class="contact-form-email">
<label for="footer-info">Medidas<span class="required">*</span></label>
<input type="medidas" aria-required="true" size="30" value="" name="medidas" id="footer-email" class="form-control" placeholder="">
</select>
</p>
</div>
<div class="col-sm-2">
<p class="contact-form-email">
<label for="footer-info">Quantidade<span class="required">*</span></label>
<input type="email" aria-required="true" size="30" value="" name="email" id="footer-email" class="form-control" placeholder="">
</p>
</div>
<div class="col-sm-2">
<p class="contact-form-email">
<label for="footer-info">Acabamento<span class="required">*</span></label>
<select name="Selecione" class="form-control">
<option>Selecione</option>
<option>Sim</option>
<option>Não</option>
</select>
</p>
</div>
<div id="campoPai"> </div>
<br>
<input type="button" value="Clique aqui para adicionar + Produtos" class="form-control" onclick="addCampos()">
<p class="contact-form-pedido"> <br>
<label for="footer-message">Informações</label>
<textarea aria-required="true" rows="6" cols="45" name="message" id="footer-message" class="form-control" placeholder=""></textarea>
</p>
<p class="contact-form-submit topmargin_40">
<button type="submit" id="footer_contact_form_submit" name="contact_submit" class="theme_button color1">Enviar</button>
</p>
</form>
</div>
</div>
<!-- eof #box_wrapper -->
</div>
<!-- eof #canvas -->
<script src="js/compressed.js"></script>
<script src="js/main.js"></script>
<!-- Scriptpara adicionar campos -->
<script type="text/javascript">
var qtdeCampos = 0;
function addCampos() {
var objPai = document.getElementById("campoPai");
//Criando o elemento DIV;
var objFilho = document.createElement("div");
//Definindo atributos ao objFilho:
objFilho.setAttribute("id","filho"+qtdeCampos);
//Inserindo o elemento no pai:
objPai.appendChild(objFilho);
//Escrevendo algo no filho recém-criado:
document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='campo"+qtdeCampos+"' name='campo[]'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='Excluir'>";
qtdeCampos++;
}
function removerCampo(id) {
var objPai = document.getElementById("campoPai");
var objFilho = document.getElementById("filho"+id);
//Removendo o DIV com id específico do nó-pai:
var removido = objPai.removeChild(objFilho);
}
</script>
<!-- fim script adicionar campos -->
<!-- <script src="js/switcher.js"></script> -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JackJeff    0

JackJeff
Postado

Muito brigado pela dica, jp carpanezi, mas eu precisaria mesmo de uma ajuda para ajustar o script como eu havia informado.

Não tenho experiência em programação então também não saberia usar essas funções que você sugeriu mas de qualquer forma, lhe agradeço muito por tentar me ajudar.

Permaneço aguardando uma ajuda mais específica.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • luiz0o
      Duas ações para um formulario
      Por luiz0o
      Estou fazendo um projeto para faculdade, e tenho um formulário, esse formulário precisa enviar as respostas tanto para um banco de dados, mas também tem que enviar para uma API que envia para meu email, mas não sei como fazer essas duas coisas ao mesmo tempo
    • rsdias
      Formulario de Contato não funciona no site dinamico(dados em branco)
      Por rsdias
      Boa tarde, sou novo aqui, estou iniciando em php, html, css, estou fazendo o meu site, e me deparei com um primeiro problema, estou fazendo ele dinamico mas sem uso de banco de dados por enquanto, mas carrego as paginas através de uma função (Escolhe Pagina):
      <?php function escolhe_pagina() { (isset($_GET['p'])) ? $pagina = $_GET['p'] : $pagina = 'home'; if(file_exists($pagina.'.php')): require_once($pagina.'.php'); else: require_once('home.php'); endif; } ?>  
      Meu index.php ficou assim:
      <?php require_once('funcao_escolhe_pagina.php'); // Função para Selecionar a Página Clicada de Modo dinâmico require_once('funcao_escolhe_titulo.php'); // Função para Selecionar o Título conforme a Página Acessada require_once('funcao_escolhe_estilo.php'); // Função para Selecionar o Estilo conforme a Página Acessada // require_once('header.php'); // Dados Html require_once('navbar.php'); // Dados Menu escolhe_pagina(); //require_once('home.php'); // Dados Body - Home ou Outras Páginas require_once('footer.php'); // Dados do rodapé da Página ?> Ou seja, tem as paginas padrões header, navbar e footer fixas usando require_once, e escolhe a pagina que pode ser home, contato, newsletter, etc atraves da função escolhe_pagina().
      Ele está chamando as paginas corretamente, porém quando entro na pagina de contato ou newsletter ele entra, porém depois de preencher o formulario e ele não chama a pagina de envio_email_contato.php no action e se coloco um link invés de input button ai ele envia o e-mail mas os dados de contatos são enviados em branco, sem preencher, não sei como resolver se alguém puder me ajudar, agradeço desde já.
      Roberto S. Dias
    • rodrigomouran
      Preencher formulário após inserir dado no Input com PHP+AJAX
      Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

    • fmcmf
      Envio PHPMailer chega sem os dados
      Por fmcmf
      Boa tarde...
      Tenho um formulário no site e o envio é usando o PHPMailer... o email está chegando no destino.... mas o conteúdo inserido nos campos não chega.
       
      Segue o código do formulário em html:
       
      <div id="banner"> <img class="fotobanner" src="img/comprar.png" alt=""> </div> <div class="formulario"> <h3 align="center"> PREENCHA OS DADOS ABAIXO PARA CONTRATAR: </h3> <form action=”envia.php” method=”post” id=”contato”> <div class="form-group"> <label for="exampleFormControlInput1">Nome completo:</label> <input type="nome" class="form-control" id="nome" placeholder="Nome" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">CPF:</label> <input type="cpf" class="form-control" id="cpfcli" placeholder="CPF" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Gênero:</label> <select class="form-control" id="generocli" required> <option>Feminino</option> <option>Masculino</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Data de Nascimento (dia/mês/ano):</label> <input type="" class="form-control" id="nasccli" placeholder="Data de nascimento (dia/mês/ano)" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Estado Civil:</label> <select class="form-control" id="ecivilcli" required> <option>Casado(a)</option> <option>Solteiro(a)</option> <option>Divorciado(a)</option> <option>Viúvo(a)</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Endereço Completo + CEP:</label> <textarea class="form-control" id="endcli" rows="3" required></textarea> </div> <div class="form-group"> <label for="exampleFormControlInput1">Celular com DDD:</label> <input type="" class="form-control" id="celcli" placeholder="Celular com DDD" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">E-mail:</label> <input type="" class="form-control" id="emailcli" placeholder="E-mail" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">PLANO Desejado:</label> <select class="form-control" id="plano" required> <option>SELECT</option> <option>PLUS</option> <option>TOP</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">NOME do PET:</label> <input type="" class="form-control" id="nomedopet" placeholder="NOME do PET" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">IDADE do PET:</label> <input type="" class="form-control" id="idadedopet" placeholder="IDADE do PET" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Tipo do PET:</label> <select class="form-control" id="tipodopet" required> <option>GATO</option> <option>CACHORRO</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Gênero do PET:</label> <select class="form-control" id="generodopet" required> <option>FÊMEA</option> <option>MACHO</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">RAÇA do PET:</label> <input type="" class="form-control" id="racadopet" placeholder="RAÇA do PET" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">PORTE do PET:</label> <select class="form-control" id="portedopet" required> <option>Pequeno</option> <option>Médio</option> <option>Grande</option> </select> </div> <div class="dobotao"> <button type="submit" class="botao"> <strong>ENVIAR DADOS </strong> </button></div> </form></div> Segue o código do enviar.php
       
      <?php require 'PHPMailerAutoload.php'; require 'class.phpmailer.php'; $mailer = new PHPMailer; //$mailer->SMTPDebug = 2; // Enable verbose debug output $mailer->isSMTP(); // Set mailer to use SMTP $mailer->SMTPOptions = array( 'ssl' => array( 'verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true ) ); if($_GET['acao'] = 'enviar'){ $nome = $_POST['nome']; $cpfcli = $_POST['cpfcli']; $generocli = $_POST['generocli']; $nasccli = $_POST['nasccli']; $ecivilcli = $_POST['ecivilcli']; $celcli = $_POST['celcli']; $plano = $_POST['plano']; $nomedopet = $_POST['nomedopet']; $tipodopet = $_POST['tipodopet']; $generodopet = $_POST['generodopet']; $racadopet = $_POST['racadopet']; $portedopet = $_POST['portedopet']; $mailer->Host = 'pleskl0040.hospedagemdesites.ws'; $mailer->SMTPAuth = true; // Enable SMTP authentication $mailer->IsSMTP(); $mailer->isHTML(true); // Set email format to HTML $mailer->Port = 587; // Ativar condição utf-8, para acentuação $mailer->CharSet = 'UTF-8'; $mailer->Username = 'formulario@thna.com.br'; // SMTP username $mailer->Password = '@Nathi1010'; // SMTP password // email do destinatario $address = "formulario@thna.com.br"; //$mailer->SMTPDebug = 1; $corpoMSG = "nome: $nome <br> cpf: $cpfcli <br> genero: $generocli <br> nascimento: $nasccli <br> estado: $ecivilcli <br> celular: $cel <br> plano: $plano <br> pet: $nomedopet <br> tipo: $tipodopet generopet $generodopet <br> racapet: $racadopet <br> porte: $portedopet"; $mailer->AddAddress($address, "destinatario"); $mailer->AddAddress("formulario@thna.com.br", "destinatario 2"); // 2º destinatário se querer enviar, se não, comente com // $mailer->From = 'formulario@thna.com.br'; $mailer->Sender = 'formulario@thna.com.br'; $mailer->FromName = "Site Saúde PET"; // Seu nome // assunto da mensagem $mailer->Subject = $assunto; // corpo da mensagem $mailer->MsgHTML($corpoMSG); if(!$mailer->Send()) { echo "Erro: " . $mailer->ErrorInfo; } else { echo "Mensagem enviada com sucesso!"; } } header('Location: /pet/confirmado.html');  ?> Como comentei,  o email chega... mas o conteúdo do form não chega... Segue anexo print da caixa do e-mail:
       
      Desde já agradeço.

    • fmcmf
      Envio PHPMailer chega sem os dados
      Por fmcmf
      Boa tarde...
      Tenho um formulário no site e o envio é usando o PHPMailer... o email está chegando no destino.... mas o conteúdo inserido nos campos não chega.
       
      Segue o código do formulário em html:
      <div id="banner"> <img class="fotobanner" src="img/comprar.png" alt=""> </div> <div class="formulario"> <h3 align="center"> PREENCHA OS DADOS ABAIXO PARA CONTRATAR: </h3> <form action=”envia.php” method=”post” id=”contato”> <div class="form-group"> <label for="exampleFormControlInput1">Nome completo:</label> <input type="nome" class="form-control" id="nome" placeholder="Nome" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">CPF:</label> <input type="cpf" class="form-control" id="cpfcli" placeholder="CPF" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Gênero:</label> <select class="form-control" id="generocli" required> <option>Feminino</option> <option>Masculino</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">Data de Nascimento (dia/mês/ano):</label> <input type="" class="form-control" id="nasccli" placeholder="Data de nascimento (dia/mês/ano)" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Estado Civil:</label> <select class="form-control" id="ecivilcli" required> <option>Casado(a)</option> <option>Solteiro(a)</option> <option>Divorciado(a)</option> <option>Viúvo(a)</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Endereço Completo + CEP:</label> <textarea class="form-control" id="endcli" rows="3" required></textarea> </div> <div class="form-group"> <label for="exampleFormControlInput1">Celular com DDD:</label> <input type="" class="form-control" id="celcli" placeholder="Celular com DDD" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">E-mail:</label> <input type="" class="form-control" id="emailcli" placeholder="E-mail" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">PLANO Desejado:</label> <select class="form-control" id="plano" required> <option>SELECT</option> <option>PLUS</option> <option>TOP</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">NOME do PET:</label> <input type="" class="form-control" id="nomedopet" placeholder="NOME do PET" required> </div> <div class="form-group"> <label for="exampleFormControlInput1">IDADE do PET:</label> <input type="" class="form-control" id="idadedopet" placeholder="IDADE do PET" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Tipo do PET:</label> <select class="form-control" id="tipodopet" required> <option>GATO</option> <option>CACHORRO</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Gênero do PET:</label> <select class="form-control" id="generodopet" required> <option>FÊMEA</option> <option>MACHO</option> </select> </div> <div class="form-group"> <label for="exampleFormControlInput1">RAÇA do PET:</label> <input type="" class="form-control" id="racadopet" placeholder="RAÇA do PET" required> </div> <div class="form-group"> <label for="exampleFormControlSelect1">PORTE do PET:</label> <select class="form-control" id="portedopet" required> <option>Pequeno</option> <option>Médio</option> <option>Grande</option> </select> </div> <div class="dobotao"> <button type="submit" class="botao"> <strong>ENVIAR DADOS </strong> </button></div> </form></div>  
      Segue o código do enviar.php

       
      <?php require 'PHPMailerAutoload.php'; require 'class.phpmailer.php'; $mailer = new PHPMailer; //$mailer->SMTPDebug = 2; // Enable verbose debug output $mailer->isSMTP(); // Set mailer to use SMTP $mailer->SMTPOptions = array( 'ssl' => array( 'verify_peer' => false, 'verify_peer_name' => false, 'allow_self_signed' => true ) ); if($_GET['acao'] = 'enviar'){ $nome = $_POST['nome']; $cpfcli = $_POST['cpfcli']; $generocli = $_POST['generocli']; $nasccli = $_POST['nasccli']; $ecivilcli = $_POST['ecivilcli']; $celcli = $_POST['celcli']; $plano = $_POST['plano']; $nomedopet = $_POST['nomedopet']; $tipodopet = $_POST['tipodopet']; $generodopet = $_POST['generodopet']; $racadopet = $_POST['racadopet']; $portedopet = $_POST['portedopet']; $mailer->Host = 'pleskl0040.hospedagemdesites.ws'; $mailer->SMTPAuth = true; // Enable SMTP authentication $mailer->IsSMTP(); $mailer->isHTML(true); // Set email format to HTML $mailer->Port = 587; // Ativar condição utf-8, para acentuação $mailer->CharSet = 'UTF-8'; $mailer->Username = 'formulario@thna.com.br'; // SMTP username $mailer->Password = '@Nathi1010'; // SMTP password // email do destinatario $address = "formulario@thna.com.br"; //$mailer->SMTPDebug = 1; $corpoMSG = "nome: $nome <br> cpf: $cpfcli <br> genero: $generocli <br> nascimento: $nasccli <br> estado: $ecivilcli <br> celular: $cel <br> plano: $plano <br> pet: $nomedopet <br> tipo: $tipodopet generopet $generodopet <br> racapet: $racadopet <br> porte: $portedopet"; $mailer->AddAddress($address, "destinatario"); $mailer->AddAddress("formulario@thna.com.br", "destinatario 2"); // 2º destinatário se querer enviar, se não, comente com // $mailer->From = 'formulario@thna.com.br'; $mailer->Sender = 'formulario@thna.com.br'; $mailer->FromName = "Site Saúde PET"; // Seu nome // assunto da mensagem $mailer->Subject = $assunto; // corpo da mensagem $mailer->MsgHTML($corpoMSG); if(!$mailer->Send()) { echo "Erro: " . $mailer->ErrorInfo; } else { echo "Mensagem enviada com sucesso!"; } } header('Location: /pet/confirmado.html'); ?> Como comentei,  o email chega... mas o conteúdo do form não chega... Segue anexo print da caixa do e-mail:
       
      Desde já agradeço.
       
       
       
       

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito