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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

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

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

This is working on the first line, but does not work on the following ones, created with jQuery.

Example address: link

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><scripttype="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

asked by anonymous 08.07.2015 / 19:04

2 answers

Firebird - function for decimal places and thousands Error with the asyncio module

score 2 · Answer 1

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

You should make use of classes to handle a scenario like yours:

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

You should move to:

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

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

Likewise, your code for the blur event 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]);
        }
    });
});

You should move 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]);
        }
    });
});

score 0 · Answer 2

$ event should occur every time you add new elements to the DOM.

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

Another thing I noticed, #cpf should get a class and not an ID, the IDs should be unique on the page, so you'll have to make these changes with #num and #dataNation too since this is being cloned. / p>

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

                }

            });

        });