auto complete of ajax inserting values in all inputs

Navigation
2

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

So long so good! It works as it should! It sends the information and returns its values!

In this same page I use a append to add a new set of input's, they have the same classes, being matricula / nome / funcao .

That's when my problem comes up! When entering the number in the first input of class matricula , it returns the values, however when using append and inserting another number in the next input of class matricula , it does not return the information it should return, it simply reuses the result of the matricula previous and reinsert in the input's nome & funcao .

I'm 90% sure that this problem is being caused by jquery, because I do not handle much, and I'm jamming things! So could you help me?

In summary I would like the code to do the following

  

That for every% of_%, auto fill in its respective input's, that is, input class="matricula" & input class="funcao" .

     
    

It is worth remembering that in the code I make every input class="nome" , the input's are inserted inside a append .

  

The working example is here: link

The codes are here :: link

    
asked by anonymous 15.08.2015 / 02:41

1 answer

1

One of the solutions to solve your problem can be implemented as follows, add a value-val="0" in your input type matricula to be new conformal initial value and a 0_ before the class of your fields as below: / p> 

<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"})
      }

    }
   });

});

I hope I have helped.

    
15.08.2015 / 03:40
How to use variables declared in other JSP pages after include? Ajax query does not work [closed]