How do I manipulate data from a select created from jquery

Question

I am trying to take the values of a select that I entered through a jquery, and as the value it adds elements within a div also created by that same jquery. The problem is that I’m not getting these values.

This is the code where I insert select into a div created in html.

<!-- Jquery Add Formulario -->
<script>

$(function AddForm() {
    var adicionar = $('.grid');
        $(document).on('click', '#id_AddMais', function () {
            $('<div  class="questionario w3-col m11 w3-white w3-padding-large">'+
              '<form method="POST" action="">'+

                  '<div class="w3-half">'+
                    '<input id="id_Enunciado" class="w3-input" type="text" name="txtEnunciado" placeholder="Enunciado">'+
                  '</div>'+

                  '<div class="styled-select w3-light-grey w3-right slate">'+

                  '<select id="id_FormaResposta" name="formaResposta">'+

                  '<optgroup>'+
                    '<option value="respostaCurta">Resposta curta</option>'+
                    '<option value="paragrafo">Parágrafo</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="multiplaEscolha">Múltipla escolha</option>'+
                    '<option value="caixasDeSelecao">Caixas de seleção</option>'+
                    '<option value="listaSuspensa">Lista suspensa</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="uploadArquivo">Upload de arquivo</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="escalaLinear">Escala linear</option>'+
                    '<option value="gradeME">Grade de múltipla escolha</option>'+
                  '</optgroup>'+

                  '<optgroup>'+
                    '<option value="data">Data</option>'+
                    '<option value="horario">Horário</option>'+
                  '</optgroup>'+

                  '</select>'+
                '</div>'+

                '<input id="id_Suporte" class="w3-input" type="text" name="txtSuporte" placeholder="Suporte">'+

                '<input id="id_Comando" class="w3-input" type="text" name="txtComando" placeholder="Comando">'+

              '</form><br>'+

              '<div class="divResposta">'+

              '</div><br>'+

              '<button  onclick="" id="id_Excluir" class="w3-bar-item w3-button w3-right" style="color: grey"><i class="material-icons">delete</i></button>'+
              '<button  onclick="" id="id_Copiar" class="w3-bar-item w3-button w3-right" style="color: grey"><i class="fa fa-copy"></i></button>'+


            '</div>').appendTo(adicionar);
            return false;
       });

       $(document).on('click', '#id_Excluir', function () {
             $(this).parents('.questionario').remove();
               return false;
       });
});
</script>

Here I am "taking" the value of select and trying to insert elements inside the previously created div(divResposta).

<!-- Pegar valor select -->
<script>

$(document).ready(function(){

$('#id_FormaResposta').on('change', function(){

    var valorSelect = $(this).val();
    var modificarDiv = $('.divResposta');

    if(valorSelect == 'paragrafo'){

        $(
            '<input type="text" value="" placeholder="Paragrafo" disabled >'

        ).appendTo(modificarDiv);
        return false;

    }

});

});

</script>

If anyone can help me, I’d appreciate it.

Answer 1

I don’t know the sequence of the HTML additions on your page, but assuming you defined the events and then called: Addform, which added the elements, the change event will not be triggered, because it was delegated before the element was rendered. So let’s switch the assignment to Document.

I suggest that, since you add several forms, do not use the id for select, which would define a single element, but a class. And your code would look like:

$(document).on('change', '.FormaResposta', function(){
    var valorSelect = $(this).val();
    var modificarDiv = $(this).parents(".questionario").find('.divResposta');

    if(valorSelect == 'paragrafo'){
        $('<input type="text" value="" placeholder="Paragrafo" disabled >').appendTo(modificarDiv);
        return false;
    }
});