Jump to content
Fórum Script Brasil
  • 0

Popular automaticamente campos adicionais criados com jQuery


Flag King
 Share

Question

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 to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...