Get Radio and Text Values in Order

Question

Good note.

I have a problem with the logic of how to proceed between a set of questions and answers. I have the code below formed by inputs with the types text and radio.I want to recover the information of these elements in the order they PRESENT themselves.The inputs are presented in the sequence question and answer.When the user finishes asking the questions and the answers I want the information is allocated in a vector where the questions were in odd indece and the answers in indece pair(Recital 1 as the first indece of the vector) AND CONSIDERING THE SEQUENCE OF THE DOCUMENT IE THE DATA OF THE FIRST QUESTION STAY IN THE INDECE 1 THE DATA OF THE ANSWER OF THE QUESTION 1 STAY IN THE INDECE 2 . THE DATA OF QUESTION 2 IS UNDECIDED 2 AND YOUR ANSWER IS UNDECIDED 3.(Values of selected radios)

<input type="text" class="pergunta">

<div><input type="radio" class="resposta" name="grupo1"  
value="num1">numero 1</div>
<div><input type="radio" class="resposta" name="grupo1" 
value="num2">nunero 2</div>
<div><input type="radio" class="resposta" name="grupo1" 
value="num3">numero 3</div>

<input type="text" class="pergunta">

<input type="text" class="resposta">

<input type="text" class="pergunta">

<div><input type="radio" class="resposta" name="grupo2"  
value="num1">numero 1</div>
<div><input type="radio" class="resposta" name="grupo2" 
value="num2">nunero 2</div>
<div><input type="radio" class="resposta" name="grupo2" 
value="num3">numero 3</div>

<input type="button" value='botao'id="botao">

I’m using the each function to take the data only it takes the data of a type first ex text and then takes the radio

Answer 1

If you use the Jquery selector, it already gets the elements for you in the order they are in HTML.

In this particular case, you could do the following:

$("input[type='text'], input[name='grupo1']:checked, input[name='grupo2']:checked")

This selector would get all the fields for you in the same order you mentioned you wanted (since this order matches the organized order in the HTML code you passed). After that, you just make one .each() to go through the elements and get all the values.

Complete code:

$('#botao').click(function(){
  var lista = [];
	$("input[type='text'], input[name='grupo1']:checked, input[name='grupo2']:checked").each(function(i, el){
  lista.push($(el).val());
  });
  console.log(lista);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pergunta 1:
<input type="text" class="pergunta">
<br>
Resposta 1:
<div><input type="radio" class="resposta" name="grupo1"  
value="num1">numero 1</div>
<div><input type="radio" class="resposta" name="grupo1" 
value="num2">nunero 2</div>
<div><input type="radio" class="resposta" name="grupo1" 
value="num3">numero 3</div>
<br>
Pergunta 2:
<input type="text" class="pergunta">
<br>
Resposta 2:
<input type="text" class="resposta">
<br>
Pergunta 3:
<input type="text" class="pergunta">
<br>
Resposta 3:
<div><input type="radio" class="resposta" name="grupo2"  
value="num1">numero 1</div>
<div><input type="radio" class="resposta" name="grupo2" 
value="num2">nunero 2</div>
<div><input type="radio" class="resposta" name="grupo2" 
value="num3">numero 3</div>
<br>
<input type="button" value="botao" id="botao">

Answer 2

Create an array with 1 empty initial element, which will be the index 0 for others to start from 1. After that is to loop the questions and add the results to the array:

var resultado = [''];
$("#botao").click(function(){
   var perguntas = $(".pergunta");
   for(var x=0; x<perguntas.length; x++){
      resultado.push($(perguntas[x]).val());
      if( $(perguntas[x]).next().hasClass("resposta") ){
         resultado.push($(perguntas[x]).next().val());
      }else{
         var radios = $(perguntas[x]).next().children("input[type='radio']").attr("name");
         var checado = $("input[name='"+radios+"']:checked").val();
         resultado.push(checado);
      }
   }
   console.log(resultado);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pergunta 1:
<br />
<input type="text" class="pergunta">
<div>
   <input type="radio" class="resposta" name="grupo1" value="num1">numero 1
</div>
<div>
   <input type="radio" class="resposta" name="grupo1" value="num2">nunero 2
</div>
<div>
   <input type="radio" class="resposta" name="grupo1" value="num3">numero 3
</div>
<br />
Pergunta 2:
<br />
<input type="text" class="pergunta">
Resposta 2:
<input type="text" class="resposta">
<br /><br />
Pergunta 3:
<br />
<input type="text" class="pergunta">
<div>
   <input type="radio" class="resposta" name="grupo2" value="num1">numero 1
</div>
<div>
   <input type="radio" class="resposta" name="grupo2" value="num2">nunero 2
</div>
<div>
   <input type="radio" class="resposta" name="grupo2" value="num3">numero 3
</div>
<input type="button" value='botao'id="botao">