Formulário com Jquery

[DiegoAlmeida 1]

Bom Dia a Todos!

 

Gostaria de uma ajuda referente a um formulário dinamico que usa jquery para apresentar um calendario e preencher a data no campo especificado, vou mostrar melhor abaixo com os passos e o problema que está ocorrendo:

 

Ao clicar no campo Data na Primeira linha é apresentado o calendario que ao selecionar a data é preenchido automaticamente. Até ai tudo bem.

 

Ao clicar no botão + é adicionado mais um formulario para preenchimento igual o visto anteriormente com todos os campos [Data, Despesas, outros, etc...]

 

Ai que está o problema, quando é adicionado novo formulario ele não consegue puxar o calendario no campo, como o primeiro. Gostaria de saber se alguém sabe o que pode ser.

 

Código do Formulario, tem um include pegando o arquivo calendario.php que coloquei o código abaixo desta postagem

 

<table>
<tr class="linhas">
<td><?php include "calendario.php"; ?>
<div id="despesas"><label>Despesas:</label>
			<select name="despesa">
				<option>Aluguel Automóvel</option>
				<option>Carro Particular Km Rodado</option>
				<option>Copias, Autenticações, Taxas</option>
                   <option>Deposito Efetuado</option>
                   <option>Despesa Com Viagem</option>
                   <option>Estacionamento</option>
                   <option>Gastos De Representação</option>
                   <option>Gorjeta</option>
                   <option>Hotel</option>
                   <option>Lavanderia</option>
                   <option>Material Expediente</option>
                   <option>Passagens</option>
                   <option>Pedágio</option>
                   <option>Refeições e Lanches</option>
                   <option>Táxi, Condução Urbana</option>
                   <option>Telefonemas</option>
                   <option>Veiculos (Combustível)</option>
                   <option>Veiculos (Lubrificantes)</option>
                   <option>Veiculos (Manutenção)</option>
                   <option>Outros - Despesas Não Cadastradas na Tabela</option>
			</select></div>
<label>Outros:</label><input class="dspoutros" type="text" name="dspoutros"/><br/>             
<label>R$ Unit:</label><input class="vlunit" type="text" name="vlunit" id="vlunit"/><label>Qtde:</label><input class="qtde" type="text" name="qtde"/><label>Total:</label><input class="total" type="text" name="total" id="total"/><label>Documento:</label><input class="docum" type="text" name="docum"/><br /><br /></td>


<td><a href="#" class="removerCampo" title="Remover linha"><img src="images/del.png" border="0" style='border:0px;padding:1px;'
/></a></td>
</table>
<td><div id="adicionacampo"><a href="#" class="adicionarCampo" title="Adicionar item"><img src="images/add.png" border="0" style='border:0px;padding:1px;'
/></a></div></td>
</tr>

<div id="totalgeral"><label>Total Geral:</label><input class="totalgeral" type="text" name="totalgeral" id="totalger"/></div></br>

 

Código do calendario.php

 

<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
		<link rel="stylesheet" href="css/calendario.css" type="text/css" media="all" />
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/calendario.js" type="text/javascript"></script>


<script>
$(function() {
	$( "#datepicker" ).datepicker({
		altField: "#alternate",
		altFormat: "DD, d MM, yy"
	});
});
</script>

<div id="calendario"><label>Data: </label><input type="text" id="datepicker" name="datanum" class="datanum"> <input type="text" id="alternate" size="30" name="diasemana" class="diasemana"/></div>

 

 

Qualquer dúvida estou à disposição, e desculpe se estou postando na área errada.

Muito Obrigado a Todos!

[Progjunior Daniel 34]

voce tem que colocar alguma variavel em php para que ele faça toda vez que crie. Por exemplo:

Existem alguma funcao que adiciona o formulário, voce coloca uma variavel php ali.

a variavel pelo o que eu estou vendo que chama o calendário é datepicker, então voce coloca assim:

<?
$cont = 0;
?>
<input type="text" id="datepicker<?=$cont?>">

// no jquery voce coloca assim
var cont = <?=$cont?>

$( "#datepicker"+cont ).datepicker({

Conforme vai adicionando inputs voce incrementa mais 1 no cont. Agora isso so vai funcionar para 1 de cada vez. Entendeu? Bem qualquer coisa fala.

[DiegoAlmeida 1]

Obrigado pela Ajuda Daniel, mas não deu certo não carrega o Calendário. Dá uma olhada se está correto abaixo o códio com a alteração que você me aconselhou.

 

<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
		<link rel="stylesheet" href="css/calendario.css" type="text/css" media="all" />
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/calendario.js" type="text/javascript"></script>


<script>

$(function() {
	var cont = <?=$cont?>
        $( "#datepicker"+cont ).datepicker({
		altField: "#alternate",
		altFormat: "DD, d MM, yy"
	});
});
</script>

<? $cont = 0;?>
<div id="calendario"><label>Data: </label><input type="text" id="datepicker<?=$cont?>" name="datanum" class="datanum"> <input type="text" id="alternate" size="30" name="diasemana" class="diasemana"/></div>

[Progjunior Daniel 34]

Voce tem que incrementar na variavel cont quando for adicionado. Aonde é a função de adicionar o formulário? é ali quando for adicionar, voce precisa incrementar a variavel cont.

[DiegoAlmeida 1]

Lá embaixo no campo que está o Botão que adiciona o Campo.

 

<table>
<tr class="linhas">
<td><?php include "calendario.php"; ?>
<div id="despesas"><label>Despesas:</label>
			<select name="despesa">
				<option>Aluguel Automóvel</option>
				<option>Carro Particular Km Rodado</option>
				<option>Copias, Autenticações, Taxas</option>
                   <option>Deposito Efetuado</option>
                   <option>Despesa Com Viagem</option>
                   <option>Estacionamento</option>
                   <option>Gastos De Representação</option>
                   <option>Gorjeta</option>
                   <option>Hotel</option>
                   <option>Lavanderia</option>
                   <option>Material Expediente</option>
                   <option>Passagens</option>
                   <option>Pedágio</option>
                   <option>Refeições e Lanches</option>
                   <option>Táxi, Condução Urbana</option>
                   <option>Telefonemas</option>
                   <option>Veiculos (Combustível)</option>
                   <option>Veiculos (Lubrificantes)</option>
                   <option>Veiculos (Manutenção)</option>
                   <option>Outros - Despesas Não Cadastradas na Tabela</option>
			</select></div>
<label>Outros:</label><input class="dspoutros" type="text" name="dspoutros"/><br/>             
<label>R$ Unit:</label><input class="vlunit" type="text" name="vlunit" id="vlunit"/><label>Qtde:</label><input class="qtde" type="text" name="qtde"/><label>Total:</label><input class="total" type="text" name="total" id="total"/><label>Documento:</label><input class="docum" type="text" name="docum"/><br /><br /></td>


<td><a href="#" class="removerCampo" title="Remover linha"><img src="images/del.png" border="0" style='border:0px;padding:1px;'
/></a></td>
</table>
<td><div id="adicionacampo"><a href="#" class="adicionarCampo" title="Adicionar item"><img src="images/add.png" border="0" style='border:0px;padding:1px;'
/></a></div></td>
</tr>

<div id="totalgeral"><label>Total Geral:</label><input class="totalgeral" type="text" name="totalgeral" id="totalger"/></div></br>


           <br /><br />

[Progjunior Daniel 34]

Cara o botão eu sei, eu estou falando do evento que faz repetir todas as inputs e tal. É ali que tem que mudar.

[DiegoAlmeida 1]

Rsrsr, me desculpa....

 

Neste caso, o evento está abaixo

jQuery(function($){
  $(function () {
 function removeCampo() {
$(".removerCampo").unbind("click");
$(".removerCampo").bind("click", function () {
   if($("tr.linhas").length > 1){
	$(this).parent().parent().remove();
   }
});
 }

 $(".adicionarCampo").click(function () {
novoCampo = $("tr.linhas:first").clone();
novoCampo.find("input").val("");
novoCampo.insertAfter("tr.linhas:last");
removeCampo();
 });
});

[Progjunior Daniel 34]

$(".adicionarCampo").click(function () {
       novoCampo = $("tr.linhas:first").clone();
       novoCampo.find("input").val("");
       novoCampo.insertAfter("tr.linhas:last");
       removeCampo();<?$cont++;?>
 });
});

Agora dessa maneira voce tera que controlar, tera que fazer um de cada vez, para fazer livre voce tera que mudar a maneira.

[DiegoAlmeida 1]

Eu ainda estou meio confuso, não tenho muito conhecimento ainda. Mas obrigado pela ajuda, caso queira ver o código fonte inteiro eu coloquei no servidor para baixar, pois não estou conseguindo fazer rodar ainda. Muito obrigado mesmo.

 

Formulario.zip

[Progjunior Daniel 34]

Cara voce fez uma funcao que faz um clone. Desse jeito não dá. Vou tentar fazer de um jeito que toda vez que entra ele cria. O clone é bom, só que nao dá para mudar os ids, class. Então tem que criar sempre um novo.

[DiegoAlmeida 1]

Nussss, eu utilizei um código pronto que consegui com um colega, até então não tinha muito conhecimento com Jquery. Mas obrigado pela atenção, qualquer coisa que tiver dúvida me avise.