find input value does not work

Asked

Viewed 70 times

1

I have a list that incremented dynamically with the jquery append, the list goes 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 am using the following code to go through the list elements and take the value of the inputs contained in each list item and put into 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('.questao_numero'). val()" is not taking the input value because?

javascript jquery html array
  • 1

    why is <ul class="questoes"> to make it work <ul class="questoes" id="questoes">

  • @Wéllingthonm.Souza In the original code is with id, is that when passing here I ended up putting wrong. And it doesn’t work anyway

2 answers

2


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

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>
<ul id="questoes">
</ul>

  • is that I copied an old excerpt, I’m sorry.

  • and about this: id="'+questao+'" is because the list is incremented with the jquery append and that stretch was inside the append

  • @Leandrosilvacampos I understood, and already updated the answer according to the question.

  • worked, but I needed it to select through the class or other specific selector, because within each item of the list of questions will also have inputs referring to the alternatives and doing so it will take the value of the alternatives as well and add in the Dice "numero questao". There is no way for a selector in specific?

  • @Leandrosilvacampos Inside each <li> will have more than 1 input?

  • @Leandrosilvacampos Vc will put 1 different class for each input?

  • I already figured out the mistake, the class names were really wrong. I was using find('questao_numero') and the class is named 'numero_questao' kkkk I lost a lot of time with it and I didn’t see that stupid of mine. But I will mark your answer as correct because in the end that was the problem

Show 2 more comments

1

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

  1. You’re trying to access how .numero_questao and you did not assign this value to the field, on the contrary you just put 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">

  2. You’re trying to access how .questao_enunciado and you did not assign this value to the field, on the contrary you just put 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 attribute data-chave you must 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>
  
<ul id="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>

  • First of all, thank you, and forgive me for being stupid, but the code is actually correct, I copied an old chunk of the code and that’s why it’s different. I edited the post up there, everything is as it should be and still does not take the value

  • when you are executing the code to get the values ? When you click on a button ? It would be better to put more details of how your code works.

  • edited the post again.

Browser other questions tagged javascript jquery html array

You are not signed in. Login or sign up in order to post.