Jump to content

JackJeff

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About JackJeff

Informações Pessoais

  • Sexo
    Masculino
  1. JackJeff

    Formulário com campos dinâmicos

    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.
  2. 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>
×

Important Information

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