Pessoal, eu tenho um script que adiciona linhas automaticamente em um formulário. Para isto utilizo jQuery.
A cada clique num botão, o jQuey cria uma nova linha no formulário, para preenchimento de novos dados.
Eu preciso que um campo seja populado com informaçoes baseadas em outro campo. Por exemplo:
Eu digito o código do item e aparece, automaticamente, a descrição dele.
Isto está funcionando na primeira linha, mas não fucniona nas seguintes, criadas com o jQuery.
Endereço do exemplo:
http://flagsmind.com/deltab/pedidos/4/
Códigos:
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="style-exemplo.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="scripts.js" ></script>
<title>Pedidos</title>
</head>
<body bgcolor="#000000" text="#CCCCCC">
<h1>Pedidos</h1>
<br><br>
Digitar 1, 2 ou 3 no campo código.<br>
Ao inserir nova linha, nao funciona o script popular campo.<br><br><br>
<div id="wrapper-formulario">
<form action="input.php" method="POST" id="form-produtos">
<table id="grid-produtos">
<thead>
<tr>
<th width="50px">cod_for</th><th width="50px">Codigo [1, 2 ou 3]</th><th width="50px">Descrição</th><th width="50px">Data</th><th width="50px">cod_valor</th><th width="50px">cod_pagto</th>
<th width="50px">num_ped</th><th width="50px">cod_ped</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr><td colspan="6"><br/></td></tr>
</tfoot>
</table>
</form>
<br>
<button id="button-add" class="button">Adicionar Item</button>
<input id="button-submit" type="submit" value="Enviar" class="button" />
<br><br><br>
PHP
Código (PHP): <?php $cpf = $_GET['cpf']; $pessoas['1']['nome'] = "Exemplo1"; $pessoas['1']['dataNascimento'] = "16/06/1986"; $pessoas['2']['nome'] = "Exemplo2"; $pessoas['2']['dataNascimento'] = "20/01/1932"; $pessoas['3']['nome'] = "Exemplo3"; $pessoas['3']['dataNascimento'] = "23/04/1914"; echo $pessoas[$cpf]['nome'] ."-". $pessoas[$cpf]['dataNascimento']; ?>
// JavaScript Document
//Executa quando todo DOM(Árvore de elementos HTML) for carregado
jQuery(function(){
jQuery.AddRow();
jQuery('#button-add').click(function(e){
e.preventDefault(); //anula a ação padrão do elemento, neste caso impede que o formulario seja enviado ao click deste botão
jQuery.AddRow(); // chamada da função que insere a nova linha;
});
jQuery('#grid-produtos tbody :text').live('change',function(){
jQuerytr = jQuery(this).closest('tr');
if ( jQuery(this).val() != '' )
jQuerytr.removeClass('linha_vazia');
qtd_colunas = jQuery(this).closest('tr').find('td').length - 1;
jQuerytd = jQuery(this).closest('td');
if( jQuerytd.index() != qtd_colunas )
{
jQuery(this).closest('td').next().find(':text').focus();
}
else
{
if ( jQuery('.linha_vazia').length == 0 )
jQuery.AddRow();
else
jQuery(this).closest('tr').next().find(':text:first').focus();
}
});
jQuery('#button-submit').click(function(){
jQuery('#form-produtos').submit();
})
})
/*
* Função: AddRow ( Adiciona Linha )
* Descrição: Insere uma nova linha no formulário
*/
jQuery.AddRow = function(){
//Recuperando o tbody da table onde será inserido a nova linha
jQuerytarget = jQuery('#grid-produtos tbody');
//Montando o html da nova linha'
jQuerynova_linha = jQuery('<tr class="linha_vazia">' +
'<td>' +
'<input type="text" width="50px" name="cod_for[]" />' +
'</td>' +
'<td>' +
'<input type="text" name="cpf[]" id="cpf">' +
'</td>' +
'<td>' +
'<input type="text" name="nome[]" id="nome">' +
'</td>' +
'<td>' +
'<input type="text" width="500px" name="dataNascimento[]" id="dataNascimento" />' +
'</td>' +
'<td>' +
'<input type="text" width="50px" name="cod_valor[]" />' +
'</td>' +
'<td>' +
'<input type="text" width="50px" name="cod_pagto[]" />' +
'</td>' +
'<td>' +
'<input type="text" width="50px" name="num_ped[]" />' +
'</td>' +
'<td>' +
'<input type="text" width="50px" name="cod_ped[]" />' +
'</td>' +
'</tr>');
jQuerytarget.append( jQuerynova_linha );
jQuerynova_linha.find(':text:first').focus();
//inserindo na tabela a nova linha
//jQuerynova_linha.find('input[type="text"]:first').focus();
}
//Outra função inserindo aqui nesta mesma página.
$(function () {
$("#cpf").blur(function () {
var cpf = $(this).val();
$.ajax({
type: "GET",
url: "pessoas.php",
data: "cpf="+cpf,
success: function(pessoa){
informacoesPessoa = pessoa.split("-");
$("#nome").val(informacoesPessoa[0]);
$("#dataNascimento").val(informacoesPessoa[1]);
}
});
});
});
Como eu posso popular as demais linhas, da mesma forma que acontece com a primeira?