0

Como Não tenho conhecimento em javascript preciso de uma ajuda de como fazer esse script funcionar no loop.

O problema dele é que o auto complete só funciona na primeira linha. se adicionar-mos outra linha ele ja não funciona mais.

Execute o script e façam o teste vocês verão que ao escolher um item no dropdown só ira completar no campo ao lado só uma vez, na segunda linha em diante não vai

(function ($) {
  $('#destino_in').on('change', function () {
      var $self = $(this);

      $('#destino_out').val($self.val());
  });
}(jQuery));

$(function () {
  var divContent = $('#materialInst');
  var botaoAdicionar = $('a[data-id="1"]');
  var i = 1;
  // VARIAVEL ADD
  var destino;

  //Ao clicar em adicionar ele cria uma linha com novos campos
  $(botaoAdicionar).click(function () {

    $('<div class="conteudoIndividual"><tr><td>'+
      '<input type="text" name="estado" size="5" class="form-control" value="" />'+
      '<select name="destino_in" id="destino_in" class="form-control">'+
        '<option value="" selected disabled>Selecione...</option>'+
        '<option value="Vilamar-10,00">Vilamar</option>'+
        '<option value="Savoy-20,00">Savoy</option>'+
      '</select>'+
      '<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
      '<input type="text" size="5" name="numero" class="form-control" value="" />'+
      '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);

    $('#removehidden').remove();
    i++;
    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);

    // ADD AQUI
    // Aqui acontece a inserção dos valores no outro input
    destino = $('#destino_in');

    // verifico no evento de change
    destino.on('change', function() {
        // quando ocorrer, capturo o valor selecionado
        var selected = $(this).val();
        // divido a string em 2, separada pelo (-) [nome(-)valor]
        var res = selected.split("-", 2);

        // res[0] = "Vilamar";
        // res[1] = "10,00";

        // adiciono no input #valor o resultado do array na posição 1
        $('#valor').val(res[1]);
    });
    // FIM ADD
  });

  //Cliquando em remover a linha é eliminada
  $('#materialInst').on('click', '.linkRemover', function () {
    $(this).parents('.conteudoIndividual').remove();
    i--;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <div id="materialInst">
  </div>
  <a href="#" id="adicionar" data-id="1">Adcionar nova Linha</a>
  <form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
  </form>
</table>

1 Resposta 1

1

Boa noite meu caro!

Peguei seu código e fiz um teste, seguinte. Na tag select coloquei a classe .destino_in e modifiquei o script que ficou da seguinte forma:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		(function ($) {
		  $('#destino_in').on('change', function () {
		      var $self = $(this);

		      $('#destino_out').val($self.val());
		  });
		}(jQuery));

		$(function () {
		  var divContent = $('#materialInst');
		  var botaoAdicionar = $('a[data-id="1"]');
		  var i = 1;
		  // VARIAVEL ADD
		  var destino;

		  //Ao clicar em adicionar ele cria uma linha com novos campos
		  $(botaoAdicionar).click(function () {

		    $('<div class="conteudoIndividual"><tr><td>'+
		      '<input type="text" name="estado" size="5" class="form-control" value="" />'+
		      '<select name="destino_in" id="destino_in" class="destino_in form-control">'+
		        '<option value="" selected disabled>Selecione...</option>'+
		        '<option value="Vilamar-10,00">Vilamar</option>'+
		        '<option value="Savoy-20,00">Savoy</option>'+
		      '</select>'+
		      '<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
		      '<input type="text" size="5" name="numero" class="form-control" value="" />'+
		      '<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);

		    $('#removehidden').remove();
		    i++;
		    $('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);

		    // ADD AQUI
		    // Aqui acontece a inserção dos valores no outro input
		    destino = $('.destino_in');

		    // verifico no evento de change
		    destino.on('change', function() {
		        // quando ocorrer, capturo o valor selecionado
		        var selected = $(this).val();
		        // divido a string em 2, separada pelo (-) [nome(-)valor]
		        var res = selected.split("-", 2);

		        // res[0] = "Vilamar";
		        // res[1] = "10,00";

		        // adiciono no input #valor o resultado do array na posição 1
		        $(this).next().val(res[1]);
		    });
		    // FIM ADD
		  });

		  //Cliquando em remover a linha é eliminada
		  $('#materialInst').on('click', '.linkRemover', function () {
		    $(this).parents('.conteudoIndividual').remove();
		    i--;
		  });
		});
	</script>
</head>
<body>
<table>
  <div id="materialInst">
  </div>
  <a href="#" id="adicionar" data-id="1">Adcionar nova Linha</a>
  <form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
  </form>
</table>
</body>
</html>

Como disse anteriormente, a modificação que fiz funcionou comigo. Caso não funcione comente por favor.

2
  • Ola Amigo não conseguir fazer funcionar no meu código poderia colocar ele completo aqui 1/10/2018 às 3:30
  • 1
    Editei a resposta meu caro. 1/10/2018 às 13:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .