Javascript 在同一页面上输出表单结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14165555/
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
Output form results on same page
提问by brandozz
I'm trying to display form results on the same page as the form but when I click my "Get Total" button I see the result appear briefly then disappear. My result is off too, I'm trying to add my variables together but I'm getting a join instead.
我试图在与表单相同的页面上显示表单结果，但是当我单击“获取总计”按钮时，我看到结果短暂出现然后消失。我的结果也关闭了，我试图将我的变量加在一起，但我得到了一个连接。
<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">
<div id="display" style="height: 50px; width: 100%;"></div>
<script>
function total(){
var a = document.forms["percentageBiz"]["sum1"].value;
var b = document.forms["percentageBiz"]["sum2"].value;
//alert(a+b)
var display=document.getElementById("display")
display.innerHTML=a+b;
}
</script>
回答by j08691
It's flashing because you're not doing anything to stop the form from submitting, and concatenating because you're not casting the values as numbers. Note you can use parseFloatif you're dealing with non-integers instead of parseIntas I used below.
它闪烁是因为你没有做任何事情来阻止表单提交，并且连接是因为你没有将值转换为数字。请注意，如果您正在处理非整数而不是我在下面使用的parseInt，则可以使用parseFloat。
Try this jsFiddle example.
试试这个jsFiddle 示例。
function total(){
var a = document.forms["percentageBiz"]["sum1"].value;
var b = document.forms["percentageBiz"]["sum2"].value;
//alert(a+b)
var display=document.getElementById("display")
display.innerHTML=parseInt(a,10)+parseInt(b,10);
return false;
}?
and
和
<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="return total()" value="Get Total">
</form>
<div id="display" style="height: 50px; width: 100%;"></div>?
回答by Vatsal
"the result appears briefly then disappears."
“结果短暂出现然后消失。”
- Try using input type="button" rather than input type="submit".
- OR Else ( while using input type="submit" ) avoid form submission, by returning falsein function total()and put onclick="return total( )".
- 尝试使用 input type=" button" 而不是 input type=" submit"。
- OR Else（在使用 input type="submit" 时）通过 在 函数 total() 中返回false并放置onclick=" return total( )" 来避免表单提交。
回答by Ian Overton
what's happening is your javascript code is working, but then submit is executing. All you need to do is switch type='submit' to type='button' and the reason you are getting the two numbers joining together is because it doesn't understand if it's a string or a number, so if you put display.innerHTML=parseInt(a + b); instead of display.innerHTML=a + b; it should solve your other problem.
发生的事情是您的 javascript 代码正在运行，但随后提交正在执行。您需要做的就是将 type='submit' 切换为 type='button' 并且您将两个数字连接在一起的原因是因为它不知道它是字符串还是数字，因此如果您将 display. innerHTML=parseInt(a + b); 而不是 display.innerHTML=a + b; 它应该可以解决您的其他问题。
回答by Kevin Stubbs
You're trying to add two strings together. You should parse them into integers first: http://www.javascripter.net/faq/convert2.htm
您正在尝试将两个字符串相加。您应该首先将它们解析为整数：http: //www.javascripter.net/faq/convert2.htm
<form id="percentageBiz" method="post">
<input type="text" id="sum1">
<input type="text" id="sum2">
<input type="submit" onclick="total()" value="Get Total">
<div id="display" style="height: 50px; width: 100%;"></div>
<script>
function total(){
var a = parseInt(document.forms["percentageBiz"]["sum1"].value);
var b = parseInt(document.forms["percentageBiz"]["sum2"].value);
//alert(a+b)
var display=document.getElementById("display")
display.innerHTML=a+b;
}
</script>
You shouldn't multiply them by 1 to cast, because that is parsing the string into an integer AND multiplying it by 1. So it's an extra step.
您不应该将它们乘以 1 进行转换，因为这会将字符串解析为整数并将其乘以 1。所以这是一个额外的步骤。
回答by nightfox79
You get a join instead of a sum because you always get String values.
你得到一个连接而不是一个总和，因为你总是得到字符串值。
You can multiply them by 1 for example, then you're var will be treaded as a number.
例如，您可以将它们乘以 1，然后您的 var 将被视为一个数字。
