Array to store input values that are inside a li

Question

Array to store input values that are inside a li

Asked 7 years, 1 month ago

Viewed 1,166 times

2

I’m having trouble making an array in jquery with "each" to save the input values contained within a list, in the following format:

Note: In the list of questions, each question has a sublist with the alternatives.

 <ul class="questoes">
        <li class="questao">
            <div class="row">
                <div class="left-col col col-md-11">
                    <input type="number" name="numero_questao" class="form-input num_quest" 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" 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> 
                    <h4 class="h5">Alternativas da questão: </h4> 
                    <ul id="alternativas">
                        <li class="alternativa">
                            <input type="text" class="form-control" value="a" style="max-width: 200px" placeholder="Indice da alternativa" data-chave="indice"> 
                            <div class="alternativa-body"> 
                                <h4 class="h5">Enunciado da alternativa: </h4> 
                                <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                <div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div> 
                            </div> 
                        </li>
                        <li class="alternativa">
                            <input type="text" class="form-control" style="max-width: 200px" value="b" placeholder="Indice da alternativa" data-chave="indice"> 
                            <div class="alternativa-body"> 
                                <h4 class="h5">Enunciado da alternativa: </h4> 
                                <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                <div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div> 
                            </div> 
                        </li>
                    </ul>
                </div> 
        </li>
    </ul>

I’ve tried several ways, I started doing this to try to save only the alternatives to do a test and even that didn’t work:

var questoes = Array();
            $("#alternativas li").each(function () {
                var alternativas = {}

                $(this).find('input').each(function () {
                    alternativas[$(this).attr('data-chave')] = $(this).val();
                });
                questoes.push(alternativas);
            });

To make it clearer, this is a questionnaire and as such has 'N' questions and each 'N' question alternatives. The idea is to form the custom questionnaire, the user who will add iteratively the questions and alternatives and this is already working with the append, the problem is that I need to take the values of inputs and organize in an array and I am not knowing how to do this

1

What is the problem you are having? What would be the expected result? There is more than 1 #alternativas on the page?

– Sergio

2017/11/08 at 19:21
Yes, that there is a questionnaire and as such has 'N' questions and every 'N' question alternatives. The idea form the custom questionnaire, the user who will add interactively the questions and alternatives and this is already working with the append, the problem is that I need to save this in an array to send via ajax and insert into the database.

– Leandro Silva Campos

2017/11/08 at 21:54
I put that html code up there just to give an idea of how the lists are formed with the questions and their alternatives @Sergio

– Leandro Silva Campos

2017/11/08 at 21:57

2 answers

Browser other questions tagged javascript jquery

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

by Matheus Cristian • **1,045** points · Answer 1 · 2019-01-13T14:24:05+00:00

Good morning, Leandro.

I made a little code for you to use as backup:
https://codepen.io/mathues/pen/oJJbWO

I used the Vue.js framework because it is very simple and easy to use.

If you are interested to know more about Vue.js here is another link with more information about.
https://br.vuejs.org/v2/guide/index.html

Looks good!

by user60252 · Answer 2 · 2017-11-09T02:26:15+00:00

Example taking input id and values.

    function shoe_types(){
       var shoeObj = {};
       $('.form-buscado').each(function(){
         shoeObj[this.id] = this.value;
       });
       return shoeObj;
    }


       var cazzo = ( JSON.stringify( shoe_types() ) );
       console.log(cazzo);
       
       console.log(JSON.parse(cazzo));

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="row">
                    <div class="left-col col col-md-11">
                    
                    
    <input type="number" name="numero_questao" class="form-input num_quest" 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" 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> 
                        <h4 class="h5">Alternativas da questão: </h4> 
                        <ul id="alternativas">
                            <li class="alternativa">
                            
                            
    <input type="text" id="questaoA" class="form-buscado" value="a" style="max-width: 200px" placeholder="Indice da alternativa" data-chave="indice"> 
                                
                                
                                <div class="alternativa-body"> 
                                    <h4 class="h5">Enunciado da alternativa: </h4> 
                                    <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                    <div class="align-items-center">
                                    
                                    
    <input type="checkbox" id="enunciadoA" class="form-buscado" name="correta" value="1" data-chave="correta"> 
                                    
                                    
                                    Esta é a alternativa correta.</div> 
                                </div> 
                            </li>
                            <li class="alternativa">
                            
                            
    <input type="text" id="questaoB" class="form-buscado" style="max-width: 200px" value="b" placeholder="Indice da alternativa" data-chave="indice"> 


                                <div class="alternativa-body"> 
                                    <h4 class="h5">Enunciado da alternativa: </h4> 
                                    <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                    <div class="align-items-center">
                                    
                                    
    <input type="checkbox" id="enunciadoB" class="form-buscado" name="correta" value="1" data-chave="correta">
                                    
                                    
                                    
                                    Esta é a alternativa correta.</div> 
                                </div> 
                            </li>
                        </ul>
                    </div> 
            </li>
        </ul>
         <button id="get">Create Object</button>