5

Minha página possui um selectbox, com alguns segmentos, quando um usuário seleciona um segmento, através do evento on change do jQuery, ele pega o valor do <option> selecionado e insere um input hidden com o valor deste option dentro de uma div com o append.

tô precisando fazer um loop for dentro dessa determinada div, e pegar o elemento input hidden com uma classe especifica, no entanto, esse input é inserido no DOM depois de evento com append.

se eu faço um loop for, e dou um console.log ele sempre retorna 'undefined'.

preciso pegar esse elemento input em especifico e ver se o usuário inseriu o mesmo input 2x com o mesmo value para só então inserir esse input

gostaria que me demonstrassem uma maneira de pegar esse elemento depois do append.

aqui está um exemplo do código: http://jsfiddle.net/stzfd7t9/2/

HTML:

<label for="segmento">selecione um segmento</label><br>
<select name="" id="segmento">
    <option value="industria">industria</option>
    <option value="tecnologia">tecnologia</option>
    <option value="telecomunicações">telecomunicações</option>
</select>

<div id="result" class="filtro">

</div>

JAVASCRIPT:

/**
* limite de filtros
* padrão: 0;
*/
var filterLimit = 0;

/**
* container das etiquetas e input
*/
var filterContainer = $('#result');

var inputList = $('#result input[class="segment"]');

// quando uma opção for selecionada, adiciona a etiqueta
$('#segmento').on('change', function() {

    filterLimit++;

    var segValue = $('#segmento option:selected').text();

    if( filterLimit < 4 ) {

        // insere loop for aqui
        for( var i=0; i<= inputList.length; i++ ) {
            console.log(inputList)
        }

        // insere o elemento no DOM
        filterContainer.append('<input type="hidden" name="segment[]" value="'+ segValue +'" class="segment">');

        // insere a etiqueta 
        filterContainer.append('<div class="etiqueta">'+ segValue +' <a href="#" id="remove">x</a></div>');

    } else {

        alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');

    }
});
1
  • Porque não procuras se já existe esse input antes de o inserir?
    – Sergio
    15/05/2015 às 20:50

3 Respostas 3

4

Note que eu usei a função each do jQuery. É como se fosse um ForEach do PHP.

Eu pego cada valor que está nos campos hidden e comparo com o valor que está sendo selecionado no ComboBox. Se tiver não adicionar.

pegar elemento depois de ser inserido no DOM com jQuery Append

Aproveitei e fiz o botão que deleta o campo, usando a função On, que ativa, por assim dizer, funções de campos criados dinamicamente.

/**
* limite de filtros
* padrão: 0;
*/
var filterLimit = 0;

/**
* container das etiquetas e input
*/
var filterContainer = $('#result');

var inputList = $('#result input')

// quando uma opção for selecionada, adiciona a etiqueta
$('#segmento').on('change', function() {
    var boo = false;
    filterLimit++;
    
    var segValue = $('#segmento option:selected').text();
    
    if( filterLimit < 4 ) {
        
       // Se já existir um campo hidden com o valor selecionado
        $("input[name='segment[]']").each(function(){
            if(segValue == $(this).val())
               boo = true;              
        });
        
        if(!boo){     
            // insere o elemento no DOM
            filterContainer.append('<input type="hidden" name="segment[]" value="'+ segValue +'" class="segment">');
            
            // insere a etiqueta 
            filterContainer.append('<div class="etiqueta">'+ segValue +' <a href="#" class="remove" id="'+segValue+'">x</a></div>');
        }
        
    } else {
        
        alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');
        
    }
});

$(document).on('click', 'a.remove', function(){

   $("input[value='"+this.id+"']").remove();
   $(this).parent().remove(); 
});

        

5
  • funcionou, mas tem um bug que depois que remove ele ainda conta como se houvesse 3 elementos adicionados. acho que tem que decrementar a variavel filterLimit 15/05/2015 às 19:52
  • Mano, editei o meu código. Eu não tinha visto que tinha dois apends, mas tem um Bug ainda. Você vai descobrir. 15/05/2015 às 20:01
  • "a função each do JS" está errado. Acho que queres dizer "do jQuery". A do JS é .forEach() nativa desde ES5.
    – Sergio
    15/05/2015 às 20:49
  • @Sergio, porque você não se concentra em responder a pergunta ? Toda vez que alguém erra algo, por mais simples que seja, você quer corrigir. 18/05/2015 às 11:32
  • 5
    @DiegoSouza já tem acontecido eu responder a perguntas que tu também respondeste. Quero evitar "roubar a resposta" e por isso comentei o que estava errado na tua resposta. Se corrigires isso eu dou +1 e escuso responder. Eu recebi muita critica quando eu comecei no SOen e aprendi com o que indicaram estar errado. Eu penso que é melhor nós membros da comunidade comunicar-mos uns com os outros do que dar -1, daí ter comentado. Se encontrares algo errado nas minhas respostas podes comentar também claro. Conclusão: comentei de boa vontade, para ajudar a melhorar a resposta.
    – Sergio
    18/05/2015 às 12:18
2

Se queres evitar que um valor seja adicionado duas vezes precisas verificar os inputs que já tens, e não adicionar um novo caso o valor já exista noutro input.

Essa verificação é feita dentro da função que é corrida on change e podes simplesmente procurar por um input com esse value diretamente:

var jaExiste = filterContainer[0].querySelector('input[value="'+segValue+'"]');
if(jaExiste) return;

Repara que usei [0] pois filterContainer é um objeto jQuery e assim extraí o elemento do DOM.

Exemplo: http://jsfiddle.net/aoe8f9vk/

1

Não deu pra entender muito bem o que você quer, porém me parece que você quer impedir o usuário de adicionar 2 valores iguais, não é?

Se for isso, basta criar uma array para guardar os valores já inseridos e fazer a verificação antes de adicionar os valores:

var filterLimit = 0,
    filterContainer = $('#result'),
    inputList = $('#result input');

var selected = new Array();

$('#segmento').on('change', function() {
    var segValue = $('#segmento option:selected').text();

    for ( var count = 0; count < selected.length; count++ ) {
        if (selected[count] == segValue) {
            alert('Você não pode adicionar 2 valores iguais');

            return false;
        }
    }

    if ( filterLimit < 3 ) {
        filterContainer.append('<input type="hidden" name="segment[]" value="' + segValue + '" class="segment">');
        filterContainer.append('<div class="etiqueta">' + segValue + ' <a href="#" id="remove">x</a></div>');

        selected.push(segValue);
        filterLimit++;
    } else {
        alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');
    }
});
1
  • desculpe eu devia ter dedicado um pouco mais de tempo na minha pergunta para deixar mais claro, eu só quero que o usuário não adicione o mesmo valor duas vezes. o problema é que não conseguia verificar isso porque o elemento input era adicionado dinamicamente. 15/05/2015 às 19:48

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 .