javascript - 将表单字段值一起添加到表单提交的隐藏字段中(js 或 jquery)

Question

这对我来说似乎 super 简单，但我今天就是想不通。

我开发了一个基本测验，并想将测验的答案加在一起以创建一个“分数”。根据分数，我会在确认页面上返回不同的结果。

这是表单的基本示例:

<form id="quiz" method="post" name="quiz" action="url">
<label for="field1">Question 1</label>
<label><input name="question1" value="1" type="radio">Answer 1</label>
<label><input name="question1" value="4" type="radio">Answer 2</label>
<label><input name="question1" value="9" type="radio">Answer 3</label>

<label for="field2">Question 2</label>
<label><input name="question2" value="1" type="radio">Answer 1</label>
<label><input name="question2" value="4" type="radio">Answer 2</label>
<label><input name="question2" value="9" type="radio">Answer 3</label>

<label for="field3">Question 3</label>
<label><input name="question3" value="1" type="radio">Answer 1</label>
<label><input name="question3" value="4" type="radio">Answer 2</label>
<label><input name="question3" value="9" type="radio">Answer 3</label>

<input value="See your Results" type="submit">
</form>

我尝试构建一些 javascript 以将这些值加在一起，但它甚至没有开始工作 - 如果您好奇的话，这是我的尝试:

function generateScore(){
    var maturityScore = document.forms[0].question1.value + document.forms[0].question2.value + document.forms[0].question1.value;
    document.forms[0].maturityLevel.value = maturityScore;
}

document.forms[0].addEventListener('submit') = generateScore

谁能指出我正确的方向？很高兴使用 javascript 或 jquery 来做到这一点。请注意，我无法编辑 html 表单 - 它是由我正在使用的 MAP 生成的(而且非常丑陋 - 我在上面发布的版本为了便于阅读而进行了简化)。

谢谢!

Answer 1

下面的代码会对你有所帮助，

$('#quiz').on('submit',function(){
var score = parseInt($('input[name=question1]:checked').val())+
            parseInt($('input[name=question2]:checked').val())+
            parseInt($('input[name=question3]:checked').val());
alert('submit'+score);
//score can be assigned to any field you need
//$('#maturityLevel').val(score);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="quiz" method="post" name="quiz" action="url">
<label for="field1">Question 1</label>
<label><input name="question1" value="1" type="radio">Answer 1</label>
<label><input name="question1" value="4" type="radio">Answer 2</label>
<label><input name="question1" value="9" type="radio">Answer 3</label>

<label for="field2">Question 2</label>
<label><input name="question2" value="1" type="radio">Answer 1</label>
<label><input name="question2" value="4" type="radio">Answer 2</label>
<label><input name="question2" value="9" type="radio">Answer 3</label>

<label for="field3">Question 3</label>
<label><input name="question3" value="1" type="radio">Answer 1</label>
<label><input name="question3" value="4" type="radio">Answer 2</label>
<label><input name="question3" value="9" type="radio">Answer 3</label>

<input value="See your Results" type="submit">
</form>

确保回答所有 3 个问题。否则，您必须在使用 parseInt 进行解析之前进行适当的验证。