input value with 'find' does not work

Navigation
1

I have a list that dynamically incremented with the append of jquery, the list goes something like this: 

    $("#questoes").append(
        '<li class="questao" data-id="'+questao+'">'+
            '<div class="row testes">'+
                '<div class="left-col col col-md-11">'+
                '<input type="number" class="form-input questao_numero" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao">' +
                '</div>'+
                '<div class="right-col col-6 col-md-1">'+
                '<i data-toggle="collapse" data-parent="#accordion" href="#collapse-'+questao+'" aria-expanded="true" aria-controls="collapse-'+questao+'" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>' +
                '</div>'+
            '</div>'+
            '<div id="collapse-'+questao+'" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-'+questao+'">' +
            '<div class="questao-body">' +
            '<h4 class="h5">Enunciado da questão: </h4>' +
                '<textarea name="enunciado" class="form-control questao_enunciado" data-chave="questao_enunciado">Enunciado da questão</textarea>' +
                '<div class="line"></div>' +
                '<h4 class="h5">Alternativas da questão: </h4>' +
                '<ul class="alternativas"></ul>'+
                '<button type="button" class="btn btn-secondary btn-sm nova_alternativa">+ Add nova alternativa</button>' +
                '<div class="line"></div>' +
            '</div>' +
        '</li>'
);

I'm using the following code to scroll through the elements of the list and get the value of the inputs contained in each list item and put it in an array: 

    $("#salvar_alteracoes").click(function(){

    var questoes = new Array();
    $("#questoes").each(function(i, e){
        $(this).find('li').each(function (j) {
            var questao = {
                "questao_numero" : $(this).find('.questao_numero').val(),
                "questao_enunciado" : $(this).find('.questao_enunciado').val(),
            };

            questoes.push(questao);
        });
    });
});

But using "$ (this) .find ('.number'). val ()" is not getting input value because?

    
asked by anonymous 12.11.2017 / 00:34

2 answers

2

Your code has a problem: There are no classes .questao_numero and .questao_enunciado . Or you put the class in its elements or get the values by the name of the tag, since there are only these two, input and textarea (I put a value="123" in input just to exemplify): 

questao = 1;
$("#questoes").append(
  '<li class="questao" data-id="'+questao+'">'+
      '<div class="row testes">'+
          '<div class="left-col col col-md-11">'+
          '<input value="123" type="number" class="form-input numero_questao" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao">' +
          '</div>'+
          '<div class="right-col col-6 col-md-1">'+
          '<i data-toggle="collapse" data-parent="#accordion" href="#collapse-'+questao+'" aria-expanded="true" aria-controls="collapse-'+questao+'" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>' +
          '</div>'+
      '</div>'+
      '<div id="collapse-'+questao+'" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-'+questao+'">' +
      '<div class="questao-body">' +
      '<h4 class="h5">Enunciado da questão: </h4>' +
          '<textarea name="enunciado" class="form-control enunciado_questao" data-chave="enunciado_questao">Enunciado da questão</textarea>' +
          '<div class="line"></div>' +
          '<h4 class="h5">Alternativas da questão: </h4>' +
          '<ul class="alternativas"></ul>'+
          '<button type="button" class="btn btn-secondary btn-sm nova_alternativa">+ Add nova alternativa</button>' +
          '<div class="line"></div>' +
      '</div>' +
  '</li>'
);

var questoes = new Array();
$("#questoes").each(function(i, e){
    $(this).find('li').each(function (j) {
        var questao = {
            "questao_numero" : $(this).find('input').val(),
            "questao_enunciado" : $(this).find('textarea').val(),
        };
        questoes.push(questao);
        console.log(questoes); // para mostrar os valores
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulid="questoes">
</ul>
    
12.11.2017 / 01:44
1

The problem is that you are trying to access an element through a selector that has not been defined, see:

  • You are trying to access as .numero_questao and you did not assign this value to the field, instead you just put it as .num_quest 

    <input type="number" name="numero_questao" class="form-input num_quest" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao" value="225">

  • You are trying to access as .questao_enunciado and you did not assign this value to the field, instead you just put it as .enunciado 

    <textarea name="enunciado" class="form-control enunciado" data-chave="enunciado">Enunciado da questão</textarea>

    • Now if what you want is to access the element by the data-chave attribute you should make the following changes: 

    var questao = {
    "questao_numero" : $(this).find('[data-chave="numero_questao"]').val(),
    "questao_enunciado" : $(this).find('[data-chave="enunciado"]').val(),
};

    See working: 

    var questoes = new Array();
$("#questoes").each(function(i, e){
    $(this).find('li').each(function (j) {
        var questao = {
            "questao_numero" : $(this).find('[data-chave="numero_questao"]').val(),
            "questao_enunciado" : $(this).find('[data-chave="enunciado"]').val(),
        };

        questoes.push(questao);
    });
});

console.log(questoes);
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script><ulid="questoes">
    <li class="questao" id="'+questao+'">
        <div class="row">
            <div class="left-col col col-md-11">
                <!-- coloquei um valor no atributo value apenas para exemplo -->
                <input type="number" name="numero_questao" class="form-input num_quest" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao" value="225"> 
            </div>
            <div class="right-col col-6 col-md-1">
                <i data-toggle="collapse" data-parent="#accordion" href="#collapse-'+questao+'" aria-expanded="true" aria-controls="collapse-questao" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>   
            </div>
        </div>
        <div id="collapse-'+questao+'" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-questao"> 
            <div class="questao-body" id="questao"> 
                <h4 class="h5">Enunciado da questão: </h4> 
                <textarea name="enunciado" class="form-control enunciado" data-chave="enunciado">Enunciado da questão</textarea> 
                <div class="line"></div> 
            </div> 
    </li>
</ul>
        
    12.11.2017 / 01:46
    How to check if there is a string in this array? Is Super Global use obsolete and insecure?