Get Radio and Text Values in Order

Question

Get Radio and Text Values in Order

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Good note.

I have a problem in the logic of how to proceed between a set of questions and answers. I have the code below consisting of inputs with the types text and radio. I want to retrieve the information of these elements in the order they are presented. they present in the sequence question and answer. When the user finishes asking the questions and the answer I want the information to be allocated in a vector where the questions remained in indece odd and the answers in indece par (Recipe 1 as the first indece of the vector) WHEREAS THE DATA OF THE DOCUMENT OR THE DATA OF THE FIRST QUESTION ARE IN THE INDECE 1 THE DATA OF THE ANSWER OF QUESTION 1 ARE IN THE INDECE 2 DATA OF QUESTION 2 IT IS IN INDECE 2 AND ITS RESPONSE IS IN INDECE 3. (Values of the 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 am using the each function to get the data, but it takes the data of a type first ex text and then picks the radios

javascript html jquery

asked by anonymous 02.02.2018 / 01:00

2 answers

1

First create an array with 1 empty starting element, which will be the 0 index so others start from 1. After that, loop the queries 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>Pergunta1:<br/><inputtype="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">

02.02.2018 / 04:15

Where are the project files developed in Android Studio on Linux? Vector of objects in Python

score 1 · Accepted Answer

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

In this specific 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 that you mentioned you wanted (since this order matches the organized order in the HTML code you passed). After that, you just have to .each() to scroll through the elements and get all the values.

Full 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>Pergunta1:<inputtype="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">