Ir para conteúdo

POWERED BY:

Arquivado

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

Paulo Roberto Start Corp

Input dinamico jquery dentro de uma tabela

Por , em Javascript

Recommended Posts

Paulo Roberto Start Corp    1

Paulo Roberto Start Corp
Postado

Bom dia pessoal

estou tentando fazer um cadastro de cheques

como posso pegar mais de 1 cheque como pagamento

gostaria de especificar tipo

se tipo = cheque faça coloque parcelas (numero de x que vai repetir os inputs)

e depois um gravar normal mesmo

 

alguem pode me ajudar ( nao sei praticamente nada de Jquery)

 

obrigado

//Funçao jquery  para duplicar input ( add_campos.js)

$(function () {
function removeCampo() {
   	$(".removerCampos").unbind("click");
   	$(".removerCampos").bind("click", function () {
       	i=0;
       	$(".dados p.campoDados").each(function () {
           	i++;
       	});
       	if (i>1) {
           	$(this).parent().remove();
       	}
   	});
}
removeCampo();
$(".adicionarCampos").click(function () {
   	novoCampo = $(".dados p.campoDados:first").clone();
   	novoCampo.find("input").val("");
   	novoCampo.insertAfter(".dados p.campoDados:last");
   	removeCampo();
});
});

 

 

teste.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
   	<script type="text/javascript" src="js/add_campos.js"></script>
</head>
<body>
<p>-----------------------------------------------------------------------------------isso funciona mais nao resolve pra mim----------------------------------------------------------------</p>
<form action="?pg=teste2" method="post">
         	<div class="dados">
           	<p class="campoDados">
               	Documento:<br />
               	<input type="text" name="nome[]" />
               	<input type="text" name="telefone[]" />
               	<a href="#" class="removerCampos">Remover Campos</a>
           	</p>
         	</div>
 <p>
       	<a href="#" class="adicionarCampos">Adicionar campos</a>
     	<input type="submit" name="button" id="button" value="Enviar" />
</p>
   	<p>-----------------------------------------------------------------------------------Daqui pra baixo é como eu quero e nao sei fazer----------------------------------------------------------------</p>
</form>

<form id="form1" method="post" action="">
 <p>
<label for="select"></label>
<select name="select" id="select">
 	<option value="1">1</option>
 	<option value="2">2</option>
 	<option value="3">3</option>
 	<option value="4">4</option>
</select>
 Quantas vezes você quer repitir ?</p>
 <table width="100%" border="0">
<tr>
 	<td>Nome campo</td>
 	<td>Nome campo2</td>
 	<td>Nome campo3</td>
 	<td>Nome campo4</td>
 	<td>Nome campo5</td>
 	<td>Nome campo6</td>
 	<td>Nome campo7</td>
 	<td>Nome campo8</td>
</tr>
<tr>
 	<td><label for="campo"></label>
   	<input type="text" name="campo" id="campo" /></td>
 	<td><input type="text" name="campo2" id="campo2" /></td>
 	<td><input type="text" name="campo3" id="campo3" /></td>
 	<td><input type="text" name="campo4" id="campo4" /></td>
 	<td><input type="text" name="campo5" id="campo5" /></td>
 	<td><input type="text" name="campo6" id="campo6" /></td>
 	<td><input type="text" name="campo7" id="campo7" /></td>
 	<td><input type="text" name="campo8" id="campo8" /></td>
</tr>
 </table>
 <p> </p>
 <p>  <div style="float:right">
<input class="btn white" type="reset" value="Limpar" />
<input class="btn grey" type="button" value="Cancelar" onClick="MM_goToURL('self','home.php?');return document.MM_returnValue">
<input class="btn azure" type="submit" onClick="return frmClienteCad();" value="Gravar" />
 </div></p>
</form>
<p> </p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo.lipienski    1

marcelo.lipienski
Postado

HTML

<select id="num_parcelas">
 <option disabled="disabled">Quantidade de parcelas</option>
 <option value="1">Uma</option>
 <option value="2">Duas</option>
</select>

<table>
 <tr class="tab_parcelas"></tr>
</table>

 

jQuery

$(function() {
 var input = '<input type="text" name="vlr_parcela[]" />';
 $("#num_parcelas").change(function() {
   for (var iterator = 0; iterator < $(this).val(); iterator++) {
     $(".tab_parcelas").append('<td>' + input + '</td>');
   }
 });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Roberto Start Corp    1

Paulo Roberto Start Corp
Postado

HTML

<select id="num_parcelas">
 <option disabled="disabled">Quantidade de parcelas</option>
 <option value="1">Uma</option>
 <option value="2">Duas</option>
</select>

<table>
 <tr class="tab_parcelas"></tr>
</table>

 

jQuery

$(function() {
 var input = '<input type="text" name="vlr_parcela[]" />';
 $("#num_parcelas").change(function() {
   for (var iterator = 0; iterator < $(this).val(); iterator++) {
     $(".tab_parcelas").append('<td>' + input + '</td>');
   }
 });
});

 

 

 

Desculpa a minha iguinorancia mais nao dei conta de usar

pode me dar mais detalhes de como devo usar o metodo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo.lipienski    1

marcelo.lipienski
Postado

O código que forneci é apenas um snippet, ele deve ser colocado de preferência em um documento html válido e bem formatado, também se faz necessária a inclusão da biblioteca jQuery no cabeçalho do documento.

 

Caso tenha feito isso, até onde você conseguiu reproduzir? Qual/quais problemas você encontrou?

 

O código jQuery deve ser inserido entre as tags 

<script type="text/javascript"></script>

, de preferência imediatamente antes de fechar o corpo do documento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Roberto Start Corp    1

Paulo Roberto Start Corp
Postado

Nao dou conta ( nao peguei a ideia)

 

<script type="text/javascript">
$(function() {
 var input = '<input type="text" name="vlr_parcela[]" />';
 $("#num_parcelas").change(function() {
for (var iterator = 1; iterator < $(this).val(); iterator++) {
 	$(".tab_parcelas").append('<td>' + input + '</td>');
}
 });
});
</script>


<select id="num_parcelas">
 <option disabled="disabled">Quantidade de parcelas</option>
 <option value="1">Uma</option>
 <option value="2">Duas</option>
</select>


<table width="100%" border="0">
 <tr>
<td>Quantidade:</td>
<td>Descrição:</td>
<td>Valor Unitario:</td>
<td>Valor Total:</td>
<td><a href="#" class="adicionarCampos"><img src="images/fugue/plus-circle-frame.png" alt="" width="16" height="16" class="legendas" title="Adicionar campos" /></a></td>
 </tr>
 <tr>
<td class="tab_parcelas"></td>
<td class="tab_parcelas"></td>
<td class="tab_parcelas"></td>
<td class="tab_parcelas"></td>
<td><a href="#" class="removerCampos"><img src="images/fugue/minus-circle.png" alt="" width="16" height="16" class="legendas" title="Remover campos"/></a></td>
 </tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelo.lipienski    1

marcelo.lipienski
Postado

Sua marcação HTML está incorreta, no código-exemplo que forneci a classe 'tab_parcelas' é adicionada a apenas uma linha.

 

<table>
 <tr class="tab_parcelas"></tr>
</table>

 

ao contrário do que você fez

<tr>
 <td class="tab_parcelas"></td>
 <td class="tab_parcelas"></td>
 <td class="tab_parcelas"></td>
 <td class="tab_parcelas"></td>
 <td><a href="#" class="removerCampos"><img src="images/fugue/minus-circle.png" alt="" width="16" height="16" class="legendas" title="Remover campos"/></a></td>
</tr>

Compartilhar este post

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

Informação importante

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

  Aceito