将HTML表单数据传递给Javascript函数

前端之家收集整理的这篇文章主要介绍了将HTML表单数据传递给Javascript函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个表单,其中有一个下拉菜单可供选择,还有三个其他文本字段供用户输入数据.

我需要对用户输入的数据执行计算,然后显示结果.

现在,我只想将结果传递给函数并打印结果.从那里我将弄清楚如何将这些输出显示到表中.

现在,我无法识别特定元素的价值.使用下拉菜单,我可以通过编写document.getElementById(“activity_level”).value来识别所选值.运行该函数时,其余值不会出现.我假设我没有识别值类型,因此浏览器知道显示内容.

这是我的HTML:

  1. <form>
  2. Activity Level: <select id="activity_level">
  3. <option value="null">Please Choose One...</option>
  4. <option value="1.25">Practically a Vegetable</option>
  5. <option value="1.35">Mostly Desk Work and Light Walking</option>
  6. <option value="1.55">Moderate Exercise 2-3 Times Per Week</option>
  7. <option value="1.75">Heavy Exercise 3-4 Times Per Week</option>
  8. <option value="1.95">Committed Hardcore Athlete</option>
  9. </select></br>
  10. BodyFat Percentage <input type="text" id="bfp" /> </br>
  11. Total Weight <input type="text" id="tw" /></br>
  12. Target Bodyfat Percentage <input type="text" id="target_bodyfat_pct" /></br>
  13. <input type="button" value="Calculate" onclick="Calculate()" />
  14. </form>

这是我的javascript:

  1. <script type="text/javascript">
  2.  
  3. function Calculate(){
  4. //document.write(bfp + "</br>");
  5. document.write(document.getElementById("activity_level").value + "</br>");
  6. //document.write(document.getElementById("tw") + "</br>");
  7. //document.write(document.getElementById("target_bodyfat_pct"));
  8. }
  9.  
  10. </script>

解决方法

您需要在输入中引用value属性,就像使用select一样
  1. document.write(document.getElementById("target_bodyfat_pct"));
  2. document.write(document.getElementById("tw") + "</br>");

应该

  1. document.write(document.getElementById("target_bodyfat_pct").value);
  2. document.write(document.getElementById("tw").value + "</br>");

另外,考虑为所有输出创建一个div,然后将其写入.

  1. <div id="yourOutputDiv"></div>
  2.  
  3. var results = document.getElementById("activity_level").value + "</br>" +
  4. document.getElementById("target_bodyfat_pct").value +
  5. document.getElementById("tw").value + "</br>";
  6.  
  7. document.getElementById("yourOutputDiv").innerHTML = results;

猜你在找的HTML相关文章