将HTML表单数据传递给Javascript函数 [英] Passing HTML Form Data to Javascript Function

问题描述

我创建了一个带有一个下拉菜单的表单，供用户选择以及其他三个文本字段供用户输入数据。

我需要对用户输入的数据进行计算，然后显示结果。

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

现在，我无法识别特定元素的值。通过下拉菜单，我可以通过编写 document.getElementById（activity_level）。value 来识别选定的值。当我运行该函数时，其余的值不会出现。我假设我没有识别值类型，所以浏览器知道显示器是什么。

这是我的HTML：

 < form> 
活动级别：< select id =activity_level> 
< option value =null>请选择一个...< / option> 
< option value =1.25>实际上是蔬菜< / option> 
< option value =1.35>大部分桌面工作和轻微步行< / option> 
< option value =1.55>中等运动2-3每周时间< / option> 
< option value =1.75>繁重的运动每周3-4次< / option> 
< option value =1.95>承诺硬核运动员< / option> 
< / select>< / br> 
 BodyFat百分比< input type =textid =bfp/> < / BR> 
总重量< input type =textid =tw/>< / br> 
 Target Bodyfat Percentage< input type =textid =target_bodyfat_pct/>< / br> 
< input type =buttonvalue =Calculateonclick =Calculate（）/> 
< / form> 
  

这是我的javascript：

 < script type =text / javascript> 
 
函数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> 
  

解决方案

您需要引用 value 属性在你的输入上，就像你用select所做的那样

  document.write（document。的getElementById（ target_bodyfat_pct））; 
 document.write（document.getElementById（tw）+< / br>）; 
  

应该是

 文件撰写（的document.getElementById（ target_bodyfat_pct）值。）; 
 document.write（document.getElementById（tw）。value +< / br>）; 
  

另外，请考虑为所有输出创建一个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; 
  

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.

Here is my 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:

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

解决方案

You need to reference the value property on your inputs, just like you did with your select

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

这篇关于将HTML表单数据传递给Javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！