jQuery inserts new rows into the form. How to populate them automatically?

Asked

Viewed 456 times

2

I have a script that automatically adds lines to a form. I use jQuery for this. With each click on a button, jQuey creates a new line in the form to fill in new data.

I need a field to be populated with information based on another field. For example: I type in the code of the item and the description automatically appears.

This is working in the first line, but not in the next ones, created with jQuery.

Example address: http://flagsmind.com/deltab/pedidos/4/

Codes:

HTML

<pre>
<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>

</head>

<body bgcolor="#000000" text="#CCCCCC">

    <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>
</pre>

PHP with data to be populated

<pre>

<?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']; 
?>
</pre>

SCRIPTS:

<pre>

// 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]);

}

});

});

});

</pre>

How can I make the new lines also populate from the Code field?

php ajax webforms

2 answers

2

You have id repeated in your code, jQuery will only work on the first one that finds.

Should make use of classes to handle a scenario like yours:

<input type="text" name="cpf[]" id="cpf">

must pass to:

<input type="text" name="cpf[]" class="cpf">

Make the same for all other identifiers, passing them to classes.

Likewise your code for the event blur should be improved to handle multiple lines with the same 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]);
        }
    });
});

must pass to:

// coleção de elementos com classe "clf"
var $cpfs = $(".cpf");

// ao ocorrer o evento Blur
$cpfs.blur(function() {

    var cpf = $(this).val(),
        $myWrapper = $(this).closest('tr'); // apanhar a TR para poder localizar
                                            // os elementos alvo no "success"

    $.ajax({
        type: "GET",
        url: "pessoas.php",
        data: "cpf="+cpf,
        success: function(pessoa){

            informacoesPessoa = pessoa.split("-");

            // a partir da TR localizar o nome e dar novo valor
            $myWrapper.find(".nome").val(informacoesPessoa[0]);

            // a partir da TR localizar a data de nascimento e dar novo valor
            $myWrapper.find(".dataNascimento").val(informacoesPessoa[1]);
        }
    });
});

0

your event $("#Cpf"). Blur should happen every time you add new elements in the DOM.

I created a function to execute the instructions of $("#Cpf"). Blur and call the function right after the jQuerytarget.append(jQuerynova_line); the event is only received to the element if the element exists ;)

Another thing I noticed, #Cpf should receive a class and not an ID, the ID should be unique on the page, so you will have to make these changes with #name and #dataNascimento also since this is being cloned.

Would look like this:

    $(".cpf").blur(function () {

            var cpf = $(this).val();
            var c = $(this);
            $.ajax({
                type: "GET",
                url: "pessoas.php",
                data: "cpf=" + cpf,
                success: function (pessoa) {

                    informacoesPessoa = pessoa.split("-");

                    c.find(".nome").val(informacoesPessoa[0]);

                    c.find(".dataNascimento").val(informacoesPessoa[1]);

                }

            });

        });

Browser other questions tagged php ajax webforms

You are not signed in. Login or sign up in order to post.