如何使用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/FormData

function getValues() {

  let myForm = document.getElementById('myForm');

  let formData = new FormData(myForm);

  

  let total = 0;

  for (var value of formData.values()) {

     total += parseInt(value);

  }

  

  document.getElementById("total").innerHTML = total;

  

  console.log(total);

}

<form id="myForm" name="myForm">

  <div>

    <label for="age">What is your age?</label>

    <select name="age">

        <option value="">- Select -</option>

        <option value="1" class="">30-34</option>

        <option value="2">35-39</option>

    </select>

  </div>

  <div>

    <label for="riskSmoke">Do you smoke?</label>

    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="2"> Yes</label>

    <label for="riskSmoke"><input type="radio" name="riskSmoke" value="0"> No</label>

  </div>

</form>

<button onclick="getValues()">Get Values</button>

<p>Total:</p>

<div id="total"></div>

Answer 2

没有 jQuery 并用于选择特定值：

function getValues() {

  var ageValue = Number(document.querySelector("select[name=age]").value);

  console.log('age value: ' + ageValue);

  var smokeValue = Number(document.querySelector('input[name="riskSmoke"]:checked').value);

  console.log('smoke value: ' + smokeValue);

  console.log('age + smoke: ' + (ageValue + smokeValue));

}

<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>

<p>    

<button onclick="getValues()">Get Values</button>

Answer 3

您可以使用构造函数 FormData。

An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

您可以使用 FormData.append 向其中添加键/值对：

formData.append('username', 'Chris');