Ir para conteúdo
Fórum Script Brasil
  • 0

Popular automaticamente campos adicionais criados com jQuery


Flag King

Pergunta

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

======================================================================================

<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, não 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 com os dados a serem populados
=============================================================================
<?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'];
?>
===================================================================
SCRIPTS:
===================================================================
// 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 posso fazer pra que as novas linhas também populem a partir do campo Código?

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...