Make Script work in loop

Asked

Viewed 93 times

0

As I’m not familiar with javascript I need a help on how to make this script work in the loop.

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

Run the script and do the test you will see that by choosing an item in the dropdown you will only complete in the next field only once, in the second line onwards you 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>
  <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>

javascript jquery ajax

1 answer

1


Good night, my dear!

I took your code and made a test, next. In the tag select I put the class . destino_in and modified the script that was as follows:

<!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>

As I said earlier, the modification I made worked with me. If it doesn’t work please comment.

  • Hello Friend unable to make it work in my code could put it complete here

  • 1

    I edited the answer my dear.

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.