Ir para conteúdo
Fórum Script Brasil

Flag King

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    1

  • Registro em

  • Última visita

Sobre Flag King

Flag King's Achievements

0

Reputação

  1. Flag King
    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, 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?
×
×
  • Criar Novo...