首頁猿問如何使用Javascript對表單...

如何使用Javascript對表單中不同字段類型的值求和

JavaScript

慕桂英546537 2022-11-03 15:19:31

我似乎無法弄清楚如何對表單中各種字段類型的值求和。我有一些這樣的選擇字段：<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。[編輯] 我應該說，我想將總值輸出給用戶，也許在一個元素內。

查看完整描述

3 回答

繁花不似錦

TA貢獻1851條經驗獲得超4個贊

可以稍微清理一下，但是使用 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);

}

<div>

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

</select>

</div>

<div>

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

</div>

</form>

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

<p>Total:</p>

反對回復 2022-11-03

守著一只汪

TA貢獻1872條經驗獲得超4個贊

沒有 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));

}

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

</select>

<p>Do you smoke?</p>

<p>

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

反對回復 2022-11-03

阿晨1998

TA貢獻2037條經驗獲得超6個贊

您可以使用構造函數 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');

反對回復 2022-11-03

3 回答
0 關注
174 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用Javascript對表單中不同字段類型的值求和

如何使用Javascript對表單中不同字段類型的值求和

3 回答

添加回答