Postagens
Male
Posted by 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>
- JeffMalm likes this
