将javascript计算结果自动放入HTML表单中

时间:2013-11-30 15:10:04

标签: javascript html

我有一个javascript函数,可以计算一些变量的整数和。这基本上是

fscalculate() = number1 + number2 + number3 = totalScore

其中fscalculate()添加三个数字并将结果设置为变量totalScore。

我创建了一个表单,询问用户的姓名和电子邮件, 我使用php脚本使用POST方法将名称和电子邮件发送到电子邮件地址。

我想要的是创建一个自动填充整数totalScore的字段。如果可以,那么我应该可以在我的php脚本中添加一行来发送用户名和电子邮件地址,

非常感谢任何帮助!

3 个答案:

答案 0 :(得分:2)

使用HTML5 <output>标记。它专为捕获表单计算结果而设计。

<form oninput="totalScore.value = (+num1.value)+(+num2.value)+(+num3.value);">
    <input type="number" id="num1" />+
    <input type="number" id="num2" />+
    <input type="number" id="num3" />=
    <output name="totalScore" for="num1 num2 num3"></output>
</form>

以下是发生情况的细分:

  • 由于输入是字符串,我们希望使用它将其强制转换为数字 +someString

  • 我们指定进入的字段的输入ID列表 计算。通常情况下,我们会使用此功能,因此我们无法获取NaN 导致其中一个输入字段为空。但是因为我们是 将输入强制转换为数字,空字符串将转换为0。 因此,没有必要,但为了清晰起见(特别是 如果计算变得更复杂的话。)

  • 请注意,我们不包含数字输入的name属性。 这是为了防止它们被提交。我们只关心结果。

另外,这是list of browsers,目前支持output

答案 1 :(得分:0)

var totalscore = num1+num2+num3;

假设你的html表单元素是

<input type="text" id="score"> 

使用jquery

$("#score").val( "hi");

完整的测试代码:

<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("#score").val( "hi");
});
</script>
</head>
<body>
<input type="text" id="score">
</bodY>
</html>

答案 2 :(得分:0)

尝试这样的事情:

<input type="text" id="total" value="" disabled />
<script>
    var totalScore = num1+num2+num3;
    document.getElementById("total").value = totalScore;
</script>

祝你好运!