将 HTML 表单数据传递给 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8547456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing HTML Form Data to Javascript Function
提问by Nick Res
I've created a form with one drop down menu to choose from as well as three other text fields for users to input data.
我创建了一个表单，其中包含一个可供选择的下拉菜单以及三个其他文本字段供用户输入数据。
I need to perform calculations on the data the user inputs and then display the results.
我需要对用户输入的数据进行计算，然后显示结果。
For now, I just want to be able to pass the results into the function and print the results. From there I'll figure out how to display those outputs into a table.
现在，我只想能够将结果传递给函数并打印结果。从那里我将弄清楚如何将这些输出显示到表格中。
Right now, I'm having trouble identifying the specific element's value. With the drop down menu I'm able to identify the chosen value by writing document.getElementById("activity_level").value. The rest of the values won't appear when I run the function. I'm assuming that I'm not identifying the value type so the browser knows what the display is.
现在，我无法识别特定元素的值。使用下拉菜单，我可以通过编写 document.getElementById("activity_level").value. 当我运行该函数时，其余的值不会出现。我假设我没有识别值类型，所以浏览器知道显示的是什么。
Here is my HTML:
这是我的 HTML：
<form>
Activity Level: <select id="activity_level">
<option value="null">Please Choose One...</option>
<option value="1.25">Practically a Vegetable</option>
<option value="1.35">Mostly Desk Work and Light Walking</option>
<option value="1.55">Moderate Exercise 2-3 Times Per Week</option>
<option value="1.75">Heavy Exercise 3-4 Times Per Week</option>
<option value="1.95">Committed Hardcore Athlete</option>
</select></br>
BodyFat Percentage <input type="text" id="bfp" /> </br>
Total Weight <input type="text" id="tw" /></br>
Target Bodyfat Percentage <input type="text" id="target_bodyfat_pct" /></br>
<input type="button" value="Calculate" onclick="Calculate()" />
</form>
Here is my javascript:
这是我的javascript：
<script type="text/javascript">
function Calculate(){
//document.write(bfp + "</br>");
document.write(document.getElementById("activity_level").value + "</br>");
//document.write(document.getElementById("tw") + "</br>");
//document.write(document.getElementById("target_bodyfat_pct"));
}
</script>
采纳答案by Adam Rackis
You need to reference the valueproperty on your inputs, just like you did with your select
您需要value在输入中引用该属性，就像您对选择所做的一样
document.write(document.getElementById("target_bodyfat_pct"));
document.write(document.getElementById("tw") + "</br>");
should be
应该
document.write(document.getElementById("target_bodyfat_pct").value);
document.write(document.getElementById("tw").value + "</br>");
Also, consider creating a div for all the output, and writing it there.
此外，考虑为所有输出创建一个 div，并将其写入那里。
<div id="yourOutputDiv"></div>
var results = document.getElementById("activity_level").value + "</br>" +
document.getElementById("target_bodyfat_pct").value +
document.getElementById("tw").value + "</br>";
document.getElementById("yourOutputDiv").innerHTML = results;
