I'm trying to get the values from a select that I've inserted through a jquery, and depending on the value it adds elements inside a div also created by that same jquery. The problem is that I can not get these values.
This is the code where I insert the 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 the select and trying to insert elements inside the div (divResponse) created previously.
<!-- 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, thank you.