Jump to content
Sign in to follow this  
JackJeff

Formulário com campos dinâmicos

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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.

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
Sign in to follow this  

  • Similar Content

    • By victorhupo
      Eu tenho um código html e quero que a partir de um formulário o javascript modifique o conteúdo dele porem tenho um conhecimento raso.
       o código seria esse.
      <textarea> <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="901" data-original-width="1600" src="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" /></a></div> </textarea> eu preciso que a partir do link q o usuário colocar no formulário ele substitua esse link de imagem pelo que foi colocado na tabela. alguém tem alguma solução?
    • By Aureo Almeida
      Possuo um formulário que está repassando parte dos dados que desejo enviar. Ele busca o resultado de três consultas e duas delas dão opções de seleção para  o usuário em input radio.
      A primeira busca informações de produtos selecionados a partir de um parâmetro recebido via post. Este mesmo parâmetro também estabelece um critério para as outras duas consultas.
      Todas elas funcionam adequadamente, sem problemas. A questão é que ao enviar o formulário somente os dois parâmetros que estão presentes em inputs hidden são enviados. Os dois inputs radio, que são preenchidos de acordo com determinados critérios, não.
      Este é o código do formulario:
      <form action="carrinho.php" method="post"> <?php //Recebe a variavel idproduto da página do produto $sub_id = $_POST['idproduto']; $sql = "SELECT * FROM psd_produtos Where prd_id = '$sub_id'"; $stmt = $conn->prepare($sql); $stmt->execute(); $dados= $stmt->fetchAll(PDO::FETCH_OBJ); foreach ($dados as $detProdutos): $prdid = $detProdutos->prd_id; $nome= $detProdutos->prd_nome; $valor = $detProdutos->prd_valor; $novovalor = number_format($valor, 2, ',', '.'); $quantidade = $detProdutos->prd_estoque; echo" <h2>PREÇO: R$ $novovalor</h2><br/> <input type='hidden' name='id' value='$prdid'> <input type='hidden' name='acao' value='add'> "; endforeach; $sql1 = "SELECT * FROM psd_cores WHERE prd_id = '$sub_id'AND crs_quantidade != '0'"; $stmt1 = $conn->prepare($sql1); $stmt1->execute(); $dados1= $stmt1->fetchAll(PDO::FETCH_OBJ); foreach ($dados1 as $prodCores): if($quantidade!= 0){ echo" <input type='radio' name='cor' id='cor' value='$prodCores->crs_cores' checked='checked'> $prodCores->crs_cores <br> ";} endforeach; $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach; ?> <input type='submit' class='imput-comprar' value='Comprar'> </form> O estranho é que se eu fizer um formulário com uma das  consultas isoladamente da demais, os parâmetros são enviados. Exemplo que funciona:
      <form action="carrinho.php" method="post"> $sql2 = "SELECT * FROM psd_sabores WHERE prd_id = '$sub_id'AND sbr_quantidade != '0'"; $stmt2 = $conn->prepare($sql2); $stmt2->execute(); $dados2= $stmt2->fetchAll(PDO::FETCH_OBJ); foreach ($dados2 as $prodSabores): if($quantidade!= 0){ echo" <input type='radio' name='sabor' id='sabor 'value='$prodSabores->sbr_sabor' checked='checked'> $prodSabores->sbr_sabor <br> ";} endforeach;?> <br><input type='submit' class='imput-comprar' value='Comprar'> </form> O que pode estar impedindo que os valores das duas consultas após a primeira não sejam enviadas em conjunto, somente isoladamente?
    • By andre2654
      Boa tarde, eu preciso de ajuda de vocês, estou com um problema que é o seguinte, eu preciso que quando a pessoa clicar na lixeira, exclua essa linha do banco de dados, mas como posso fazer? perdoem a minha inexperiência, mas já busquei bastante a respeito e nada.
    • By kriskastro
      Oi, pessoal. Preciso de uma ajuda de vocês. 
      Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso?
       
      A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi.
      <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>  
    • By duarte.php
      Boa noite, pessoal, estou fazendo meu tcc (nível técnico kkk) e preciso de ajuda com uma conexão com o banco.
       
      Fiz um formulário para consultar empréstimos em uma biblioteca através do rm (id) e exibir os dados que estão cadastrados neste rm. 
      Estou com dificuldades para que os dados sejam puxados e exibidos na página. 
       
      Esta é a parte que pede o RM no html
      <h4 class="title">Insira o seu RM: </h4> <input type="text" name="rm" class="form-control" required/>  
      Este é o código php
      <?php $rm = $_POST['rm']; include("conecta.php"); $busca = mysql_query("SELECT * FROM tb_locador WHERE rm='$rm'"); $dado = mysql_fetch_array($busca); $nome = $dado['nome']; $ano = $dado['ano']; $curso = $dado['curso']; $tel = $dado['tel']; echo "RM: " . $rm . "<br>"; echo "Nome do locador: ".$nome. "<br>"; echo "Curso do locador: ".$curso. "<br>"; echo "Ano de início do curso: ".$ano. "<br>"; echo "Telefone do locador: ".$tel. "<br>"; ?> Até então, o único dado exibido é o RM, como faço para exibir o nome, curso, ano e telefone? 
       
×

Important Information

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