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

Putting a javascript calculation result into HTML form automatically

本文关键字：HTML 表单 javascript 计算 结果      更新时间：2024-01-20

我有一个javascript函数，它计算一些变量的整数和。基本上是

fscalculate() = number1 + number2 + number3 = totalScore

其中fscalculate（）将三个数字相加，并将结果设置为变量totalScore。

我创建了一个表单，要求用户输入他的姓名和电子邮件，我使用了一个php脚本，使用POST方法将名称和电子邮件发送到一个电子邮件地址。

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

任何帮助都将不胜感激！

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

  • 我们指定进入计算通常情况下，这样我们就不会得到NaN结果，以防其中一个输入字段为空。但既然我们将输入强制转换为数字，将空字符串转换为0。因此，这不是必要的，但为了清晰起见（尤其是如果计算变得更加复杂）。

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

此外，这里还有一个当前支持output的浏览器列表。

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>

试试这样的东西：

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

祝你好运！

相关文章：