Capturing input data of type "radio" and transforming into JSON

Question

Capturing input data of type "radio" and transforming into JSON

Navigation

#1 by (1 votes)

1

(This project is being developed with Spring Boot + Thymeleaf) I have an html page that will work as a questionnaire containing more or less 100 questions (the code below is just an example). Each question has 4 inputs.

<div>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" th:name="${question.id}" th:data-correct="${question.correctOption}" value="d" /><span th:text="${question.optionD}"></span>
</div>

I want to get, via JavaScript (JQuery), all inputs that are "checked" and store them in a JSON and then send that object to a controller via Ajax.

function getAllResults() {
var inputs = $('input:radio:checked');
for (var i = 0; i < inputs.length; i++) {
    //inserir os dados em um objeto JSON 
}

My question is (if at all possible), how to store the data within JSON? Example:

("answer" would be the "value" attribute and "correctOption" would be the "th: data-correct" attribute)

[
  {"answer": c, "correctOption": b}
  {"answer": a, "correctOption": d}
  {"answer": d, "correctOption": a}
  {"answer": b, "correctOption": c}
]

javascript json spring-boot thymeleaf

asked by anonymous 24.05.2018 / 00:46

1 answer

Return result in a field Transaction control application rest in spring

score 1 · Accepted Answer

You can make a .push of objects with values in an array.

In the example I changed some attributes so that you can see the result here in the snippet:

function getAllResults() {
   
   var respostas = []; // array onde serão guardados todos os resultados
   
   var inputs = $('input:radio:checked');
   
   for (var i = 0; i < inputs.length; i++) {
      respostas.push({
         "answer" : inputs[i].value,
         "correctOption":  inputs[i].dataset.correct
      });
   }
   
   console.log(respostas);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div>Marqueumaopção<br><inputclass="question-option" type="radio" name="q1" data-correct="b" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" name="q1" data-correct="b" value="d" /><span th:text="${question.optionD}"></span>
</div>
<div>
   Marque uma opção
   <br>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="a" /><span th:text="${question.optionA}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="b" /><span th:text="${question.optionB}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="c" /><span th:text="${question.optionC}"></span>
    <input class="question-option" type="radio" name="q2" data-correct="d" value="d" /><span th:text="${question.optionD}"></span>
</div>
<button onclick="getAllResults()">Resultados</button>