【问题标题】:Pass array of ints from checked radio buttons instead of strings of numbers从选中的单选按钮传递整数数组而不是数字字符串
【发布时间】:2019-03-01 19:14:22
【问题描述】:

焦点区域:看到 th:value="1" 了吗?它通过 JavaScript 表单传递并作为字符串数组的一部分返回到控制器。是否可以将其转换为 int?

 <input
                                type="radio"
                                th:name="'userAnswer' + ${iter.index}"
                                th:value="1"
                                th:attr = "data-question-id=${question.value}, data-question-key=${question.key}" /> 

如果您需要更多上下文,剩下的就在这里。

model.addAttribute("title", "Take The Test!");
model.addAttribute("currentMatchingTestQuestions", questions);
model.addAttribute("newList", shuffleMap);
model.addAttribute("test",currentTest);

<div th:each="question, iter : ${newList}" name="questions" class="list-group">
                <h2 th:text="${question.key}" class="list-group-item-heading">User Display Name</h2>
                <div class="form-group">
                    <br></br>
                    <label th:for="desiredAnswer1">Desired Answer</label>
                    <br></br>
                    <!--maybe put div for each hidden input?-->
                    <!--iter. index is so that each name is different, so we can click one button per question.-->
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="1"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"

                            /> Always True
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="1" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="2"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Mostly True
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="2" class="userAnswers" />
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="3"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Sometimes True Sometimes False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="3" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="4"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    /> Mostly False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="4" class="userAnswers"/>
                    <br></br>
                    <input
                            type="radio"
                            th:name="'userAnswer' + ${iter.index}"
                            th:value="5"
                            th:attr = "data-question-id=${question.value}, data-question-key=${question.key}"
                    />  Always False
                    <!--<input type="hidden" th:value="${question.id}" name="questionId" />-->
                    <input type="hidden" th:name="userAnswer" th:value="5" class="userAnswers"/>
                    <br></br>
                </div>
        </div>

function findChecked() {

    const checkedRadios = [];
    const questionIds = []; //arrays
    const questionKeys = [];
    const answerInput = document.querySelector('#allAnswers'); //why is this declared twice again?
    const questionIdInput = document.querySelector('#questionIds');//sets variable for hidden input of questionIds
    const questionKeysInput = document.querySelector('#questionKeys');
    const radios = document.querySelectorAll('input[type=radio]');// sets variable for all radio button values
    radios.forEach(radio =>{ //loops through radio values
    if(radio.checked){ // if the radio button is checked
        checkedRadios.push(radio.value); //push the value of radio button to checkedRadios array
        questionIds.push(radio.dataset.questionId);//push question.Id to questionIds array. Notice that dataset interprets...
        questionKeys.push(radio.dataset.questionKey);                                  //...question.id as questionId

        }

    });
    answerInput.value = checkedRadios; // pass array of checked radios to answerInput for the id of "allAnswers" hidden input
    questionIdInput.value = questionIds;// same as above but for id="questionIds" hidden input
    questionKeysInput.value = questionKeys;
    console.log(checkedRadios);//debug
    console.log(questionIds);
}

我正在使用 JavaScript 表单来获取每个用户的答案并将其放入一个数组中。但是,现在它只能发送一个数字字符串数组。有没有办法使用 JS 或 Thymeleaf 来请求参数数组/整数/整数列表。我正在使用 SpringBoot 将参数请求到控制器中:

 public String processTakeTest(Model model, @PathVariable int testId, HttpSession session, @RequestParam(name="allAnswers") String allAnswers[],
                              @RequestParam(name="questionIds") String questionIds[], @RequestParam(name="questionKeys") String questionKeys[])

【问题讨论】:

  • 为什么要标记为 [java]?
  • @ricky3350 它被标记为 Java,因为它涉及 Thymeleaf 和 Spring MVC,它们是 Java 框架工具。
  • 哦,我错过了那部分。对不起!

标签: javascript java spring type-conversion thymeleaf


【解决方案1】:

使用 Number() 将字符串转换为数字

checkedRadios.push(Number(radio.value))

【讨论】:

    猜你喜欢
    • 2019-05-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-22
    相关资源
    最近更新 更多