ajax auto complete by entering values in all inputs

Question

To using an ajax request, to send a number to the server and return information relating to that number! In case I return two values, they are nome & funcao.

So far so good! It’s working as it should! It sends the information and returns its respective values!

On that same page I use a append to add a new set of input’s, they have the same classes, they are matricula / nome / funcao.

Then my problem arises! By inserting the number in the first class input matricula, it returns the values, but when using the append and insert another number into the next class input matricula, it does not return the information it should return, it simply reuses the result of the matricula previous and reinsere in input’s nome & funcao.

I’m 90% sure that this problem is being caused by jquery, because I don’t know much, and I’m cluttering things up! So could you help me?

In short I would like the code to do the following

That every input class="matricula", auto fills up their respective input’s, ie the input class="funcao" && input class="nome".

Remember that in the code I make each append, the input’s are inserted within a div class="trabalhador".

The working example is here :: http://www.vullsper.com/consultaajax/

The codes are here:: http://jsfiddle.net/n7vbg3g2/

Answer 1

One of the solutions to solve your problem can be implemented as follows, add a data-val="0" in your input type matricule to be a new default value and a 0_ before the class of your fields as below:

<form method="post" enctype="multipart/form-data" >
    <h1>Digite um numero de 1 á 6</h1>

    <div class="participantes">
        <div class="trabalhador" id="tra_0">
            <input type="text" name="0_matricula" placeholder="Matrícula" data-val="0" class="matricula" />
            <input type="text" name="0_nome" placeholder="Nome" class="0_nome" />
            <input type="text" name="0_funcao" placeholder="Funçao" class="0_funcao" />
        </div>
    </div>

    <br>

   <div class="novo">Acrescentar append</div> 

</form>

Now change the logic of your javascript as below:

 //Aqui metodo para setar o evento na class matricula
 function eventoDeMatricula() {

    $(".matricula").change(function (json){

    $.ajax({
    type: 'get', 
    url: "//vullsper.com/consultaajax/retorno.php",
    data: 'nome='+ $('.matricula').val(), 
    dataType: "json", //Tipo de Retorno
    cache: false,
    success: function(json) {

      //aqui eu pego o index setado no data-val do seu input
      var idx = $(this).data('val');

      //Aqui eu seto o valor baseado nele
      $(('.' + idx + '_nome')).val("teste");
      $(('.' + idx + '_funcao')).val("opaa");

    }
   });
}

$(document).ready(function () {

   /*aqui chamo evento no seu matricula pela promeira vez*/
   eventoDeMatricula();

   $(".novo").click(function(){

    var n = $("div.trabalhador").length;

    if( n <= 2) {    

      /*aqui eu alterei para setar o data-val e adicionei o seu count n na frente das class*/
      $(".participantes").append(
        '<div class="trabalhador" id="tra_'+n+'"><input type="text" name="'+n+'_matricula"' +
        'placeholder="Matrícula" data-val="'+ n +'" class="matricula" /><input type="text" name="'+n+'_nome"' + 
        'placeholder="Nome" class="'+ n +'_nome" /><input type="text" name="'+n+'_funcao"'+
        'placeholder="Funçao" class="'+ n +'_funcao" /></div>');

      $(".adicionados").val(""+ n + "");

      /*como acabamos de criar um novo elemento eu chamo 
      novamenteo o metodo abaixo para setar o evento em todos 
      os campos maticula inclusive no novo*/
      eventoDeMatricula();

      if(n == 2) {
        $(".participantes").append('<div class="aviso">Limite de sites atingido</div>'); 
        $(".novo").css({display:"none"})
      }

    }
   });

});

hope I’ve helped.