Ir para conteúdo

Arquivado

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

marinacollin

Adicionar campos dinâmicamente

Recommended Posts

Olá gente. Preciso desenvolver um formulário de cadastro de vendas, onde quando a pessoa colocasse o número de parcelas, se abrissem dinamicamente os campos "data de vencimento" e "valor da parcela". Por exemplo, se são três parcelas, três vezes esses dois campos.

Mas eu sou totalmente LEIGA, e não consigo pensar em como fazer isso da maneira correta. O jeito que consegui, não está funcionando direito, o código é o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Adicionando linhas dinamicamente</title>
<style type="text/css" media="all">
body{ font-family:Arial, Helvetica, sans-serif}
#tudo{border:#CCCCCC 1px solid;width:400px;margin:0 auto}
.bd_titulo{
  text-align:center;
  background-color:#CCCCCC;
  font-weight:bold
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
  if($("tr.linhas").length > 1){
$(this).parent().parent().remove();
  }
});
  }
if
$("#qtdparc").change(function () {
for($i=2;$i<=this.value;$i++){
  // $(".adicionarCampo").click(function () {
novoCampo = $("tr.linhas:first").clone();
novoCampo.find("input").val("");
novoCampo.insertAfter("tr.linhas:last");
removeCampo();} 
  });
});
</script>
</head>
<body>
<form method="post" name="frm_campo_dinamico" action="">
<div id="tudo">
<table border="0" cellpadding="2" cellspacing="4">


 <tr><td colspan="4">
       Quantidade de Parcelas <input type="text" name="qtdparc" id="qtdparc" value="1">
</td></tr> 
  <tr><td class="bd_titulo" width="10">Valor Parcela</td><td class="bd_titulo">Data Vencimento</td></tr>
  <tr class="linhas">
    <td><input type="text" name="valor[]" style="text-align:center" /></td>
    <td><input type="text" name="dtvenc[]" /></td>
    
    <td><a href="#" class="removerCampo" title="Remover linha">Remove</a></td>
  </tr>
  <tr><td colspan="4">
        <a href="#" class="adicionarCampo" title="Adicionar item">Adiciona</a>
</td></tr> 
</table>
</form>
</div>
<?php 
// exibindo os dados
if ($_POST){
   $valor  = $_POST['valor'];
   $descr  = $_POST['dtvenc'];
   $quant_linhas = count($valor);
   for ($i=0; $i<$quant_linhas; $i++) {
echo  "Valor Parcela: ".$valor[$i]."<br />";
echo  "Data de Vencimento: ".$descr[$i]."<br />";


   }
}
?>
</body>
</html>
Desculpem se eu estou sendo ignorante. Mas realmente não sei sair dessa :/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Marina, Bom Dia! Na parte de exibir os dados com PHP, acho que a lógica do IF esta incorreta. Tente:

<?php
if (isset($_POST)){
   $valor = $_POST['valor'];
   $descr = $_POST['dtvenc'];
   $quant_linhas = count($valor);
   for ($i=0; $i<$quant_linhas; $i++) {
    echo  "Valor Parcela: ".$valor[$i]."<br />";
    echo  "Data de Vencimento: ".$descr[$i]."<br />";
   }
}
?>

Espero ter Ajudado ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Gustavo.

 

Verdade, muito obrigada.

 

Eu nem tinha reparado, porque na verdade, esse form não está enviando ou recebendo dados ainda aqui, porque eu apenas estou procurando uma forma de fazer funcionar o que especifiquei ali em cima, com os campos dinâmicos e tal.

 

Mas muito obrigada mesmo, pois provavelmente em breve eu teria problemas com isso, haha.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi

 

Mudei um pouco seu codigo, acho que ficou perto do que queria

agora e sua vez de continuar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Adicionando linhas dinamicamente</title>
        <style type="text/css" media="all">
            body{ font-family:Arial, Helvetica, sans-serif}
            #tudo{border:#CCCCCC 1px solid;width:400px;margin:0 auto}
            .bd_titulo{
                text-align:center;
                background-color:#CCCCCC;
                font-weight:bold
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            
            $(function() {
                function excluir() {
                   $(this).parent().parent().remove();
                }
                $("#qtdparc").change(function() {
                    $("#varia").empty();
                    for (i = 0; i < this.value; i++) {
                        $("#varia").append("<tr><td><input type='text' name='valor[]' style='text-align:center' /></td>\n\
                                            <td><input type='text' name='dtvenc[]' /></td>\n\
                                            <td><a href='#' class='btnExcluir' title='Remover linha'>Remove</a></td></tr>");
                        $(".btnExcluir").bind("click", excluir);
                    }
                });
            });
        </script>
    </head>
    <body>
        <form method="post" name="frm_campo_dinamico" action="">
            <div id="tudo">
                <table border="0" cellpadding="2" cellspacing="4">
                    <tr>
                        <td colspan="4">
                            Quantidade de Parcelas <input type="text" name="qtdparc" id="qtdparc" value="1">
                        </td>
                        <tr>
                            <td class="bd_titulo" width="10">Valor Parcela</td><td class="bd_titulo">Data Vencimento</td>
                        </tr>
                    </tr>
                </table>
                <table border="0" cellpadding="2" cellspacing="4">
                    <tbody id="varia">

                    </tbody>
                    <tfoot>
                        <tr><td colspan="4">
                                <a href="#" class="adicionarCampo" title="Adicionar item">Adiciona</a>
                            </td>
                        </tr> 
                    </tfoot>
                </table>
        </form>
    </body>
</html>

esse if e desnecessario, e o $ na frente da variavel e coisa do PHP vai te confundir

if
$("#qtdparc").change(function () {
for($i=2;$i<=this.value;$i++){

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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