如何使用Javascript对表单中不同字段类型的值求和

Question

我似乎无法弄清楚如何对表单中各种字段类型的值求和。我有一些这样的选择字段：

<select name="age">    <option value="">- Select -</option>
    <option value="1" class="">30-34</option>
    <option value="2">35-39</option></select>

还有一些单选按钮：

    <p>Do you smoke?</p>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br>
    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>

但是我将如何添加所有选择？我可以找到仅添加输入值、仅添加无线电值或仅添加选择值的解决方案。但不是全部在一起。

如果必须，我会使用 jQuery。

[编辑] 我应该说，我想将总值输出给用户，也许在一个元素内。

Answer 1

可以稍微清理一下，但是使用 FormData 接口将表单中的所有值相加的示例：https ://developer.mozilla.org/en-US/docs/Web/API/FormDatafunction getValues() {&nbsp; let myForm = document.getElementById('myForm');&nbsp; let formData = new FormData(myForm);&nbsp;&nbsp;&nbsp; let total = 0;&nbsp; for (var value of formData.values()) {&nbsp; &nbsp; &nbsp;total += parseInt(value);&nbsp; }&nbsp;&nbsp;&nbsp; document.getElementById("total").innerHTML = total;&nbsp;&nbsp;&nbsp; console.log(total);}<form id="myForm" name="myForm">&nbsp; <div>&nbsp; &nbsp; <label for="age">What is your age?</label>&nbsp; &nbsp; <select name="age">&nbsp; &nbsp; &nbsp; &nbsp; <option value="">- Select -</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="1" class="">30-34</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="2">35-39</option>&nbsp; &nbsp; </select>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <label for="riskSmoke">Do you smoke?</label>&nbsp; &nbsp; <label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label>&nbsp; &nbsp; <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>&nbsp; </div></form><button onclick="getValues()">Get Values</button><p>Total:</p><div id="total"></div>

Answer 2

没有 jQuery 并用于选择特定值：function getValues() {&nbsp; var ageValue = Number(document.querySelector("select[name=age]").value);&nbsp; console.log('age value: ' + ageValue);&nbsp; var smokeValue = Number(document.querySelector('input[name="riskSmoke"]:checked').value);&nbsp; console.log('smoke value: ' + smokeValue);&nbsp; console.log('age + smoke: ' + (ageValue + smokeValue));}<select name="age">&nbsp; &nbsp; <option value="">- Select -</option>&nbsp; &nbsp; <option value="1" class="">30-34</option>&nbsp; &nbsp; <option value="2">35-39</option></select><p>Do you smoke?</p><label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label><br><label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label><p>&nbsp; &nbsp;&nbsp;<button onclick="getValues()">Get Values</button>

Answer 3

您可以使用构造函数 FormData。An&nbsp;HTML&nbsp;<form>&nbsp;element&nbsp;—&nbsp;when&nbsp;specified,&nbsp;the&nbsp;FormData&nbsp;object&nbsp;will&nbsp;be&nbsp;populated&nbsp;with&nbsp;the&nbsp;form's&nbsp;current&nbsp;keys/values&nbsp;using&nbsp;the&nbsp;name&nbsp;property&nbsp;of&nbsp;each&nbsp;element&nbsp;for&nbsp;the&nbsp;keys&nbsp;and&nbsp;their&nbsp;submitted&nbsp;value&nbsp;for&nbsp;the&nbsp;values.&nbsp;It&nbsp;will&nbsp;also&nbsp;encode&nbsp;file&nbsp;input&nbsp;content.您可以使用 FormData.append 向其中添加键/值对：formData.append('username',&nbsp;'Chris');