Make Script work in loop

Question

Make Script work in loop

Navigation

#1 by (1 votes)

0

As I'm not aware of javascript I need a help on how to make this script work in the loop.

His problem is that auto complete only works on the first line. if we add another line it will no longer work.

Run the script and test you will see that when choosing an item in the dropdown will only complete in the field next to only once, the second line onwards will not

(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><divid="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>

javascript jquery ajax

asked by anonymous 30.09.2018 / 21:22

1 answer

Play next video automatically Whole value in hours with Golang

score 1 · Accepted Answer

Good evening, my dear!

I took your code and did a test, next. In the select tag I put the .destino_in class and modified the script that looks like this:

<!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(){vardivContent=$('#materialInst');varbotaoAdicionar=$('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>

As I said earlier, the modification I made worked for me. If it does not work please comment.