0

Como não tenho muito conhecimento de javascript Preciso de uma ajuda nesse meu problema aqui... Neste e formulário preciso que ao escolher um item no dropdown ele preencha o campo ao lado com o valor contido no seu value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<script language="javascript">

(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;

    //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">Vilamar</option>'+
  '<option value="Savoy">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);
    });

    //Cliquando em remover a linha é eliminada
    $('#materialInst').on('click', '.linkRemover', function () {
        $(this).parents('.conteudoIndividual').remove();
        i--;
    });
});
//-->



</script>
<table>
<div id="materialInst">
 

</div>
<a href="#" id="adicionar" data-id="1">Clonar</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
   




</div>



</form>

No dropdown desse formulario temos os seguintes dados no de entrada

<option value="Vilamar-10,00">Vilamar</option>

Preciso que ao escolher um item nesse dropdown ele autocomplete no campo name="valor" esse valore que vem após o nome do item

1 Resposta 1

1

Segue solução encontrada. Utilizei do evento change para capturar o valor no momento que o usuário escolhe uma opção no select. Quebro o value do select em 2 partes[Nome-Valor], e pego somente a parte referente ao valor, adicionando ao input ao lado.

(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_' + i + '" id="destino_in_' + i + '" 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_' + i + '" id="valor_' + i + '" 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
            // capturo todos os selects existentes
            destinos = document.querySelectorAll('select');
            // percorro todos pelo for
            for(var j = 0; j < destinos.length; j++) {
                // verifico no evento de change
                $(destinos[j]).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";

                    // captura o id atual
                    var idAtual = $(this).attr('id');
                    // divide a string em 3, separada pelo (_) [destino(_)in(_)id]
                    var idFinal = idAtual.split("_", 3);
                    // idFinal[0] = "destino";
                    // idFinal[1] = "in";
                    // idFinal[1] = "{$id}";
    
                    // adiciono no input #valor o resultado do array na posição 1 no id capturado anteriormente na posição 2
                    $('#valor_' + idFinal[2]).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">Clonar</a>
  <form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >                
  </form>
</table>

2
  • Quase perfeito meu amigo... só que se clonarmos mais vezes ele para de funcionar Commented 26/09/2018 às 21:43
  • @FabioHenrique atualizei o código, como solicitado. Da uma olhada ai. Commented 6/10/2018 às 0:27

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 .