將表單字段值一起添加到表單提交的隱藏字段中（js 或 jquery）

Question

這對我來說似乎非常簡單，但我今天無法弄清楚。

我開發了一個基本測驗，並希望將測驗的答案加在一起以創建“分數”。 根據分數，我會在確認頁面上返回不同的結果。

這是表單的基本示例：

<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解析之前進行適當的驗證。