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

Popular automaticamente campos adicionais criados com jQuery

Flag King

Perguntado por Flag King,

 Share

Pergunta

Flag King

Flag King

Postado
Postado

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...