在同一页输出表单结果

我试图在窗体的同一页上显示表单结果，但是当我点击“Get Total”按钮时，我看到结果短暂出现然后消失。我的结果也是关闭的，我试图将我的变量加在一起，但是我得到了一个连接。在同一页输出表单结果

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

来源

2013-01-04 brandozz

尝试在将它们加在一起之前解析变量'a'和'b' [String to Number convertion]（http://www.javascripter.net/faq/convert2.htm）。如果我没有弄错，会在最后添加一个“返回false”，这会阻止提交发生。 – atomman

它闪烁，因为您没有做任何事情来阻止表单提交，并且因为您没有将值作为数字进行连接而进行连接。请注意，如果您使用的是非整数而不是parseInt，则可以使用parseFloat，正如我在下面所使用的。

试试这个jsFiddle example。

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

和

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

来源

2013-01-04 21:53:46 j08691

我不太喜欢'onclick'。 –

@ j08691完美！谢谢！ – brandozz

由于总是获取字符串值，所以您得到了一个连接而不是总和。

例如，你可以乘以1，然后你的var将会被视为一个数字。

来源

2013-01-04 21:52:41 nightfox79

发生了什么事是你的JavaScript代码工作，但然后提交正在执行。所有你需要做的是将type ='submit'改为type ='button'，你将两个数字连接在一起的原因是它不知道它是一个字符串还是一个数字，所以如果你放置显示。 innerHTML = parseInt（a + b）;而不是display.innerHTML = a + b;它应该解决你的其他问题。

来源

2013-01-04 21:54:14

不正确。不够。这只会解决一个问题。 –

您的权利我没有看到其他部分。他还需要做display.innerHTML = parseInt（a + b）; –

您试图将两个字符串添加在一起。你应该先分析其成整数： 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>

你不应该被1乘他们投，因为那是解析字符串转换成整数，并通过1乘以所以这是一个额外的步骤。

来源

2013-01-04 21:55:54

http://jsperf.com/number-cast - 如果你追求速度，可以使用'parseFloat'。它击败'parseInt' 2：1; 'parseInt'也是2：1。一元加应该是最快的，但事实并非如此。一元加上仍然赢得了良好和可读性。就int-cast而言，我印象深刻的是'~~'比'| 0'快。就Firefox而言，一切都是一样的。 –

OK ... parseFloat在V8中的岩石，parseInt =一元加号，V8在* 1中很慢，我留下深刻的印象'~~'稍微胜过'| 0'。在FF中，parseInt比其他的更好，这完全一样。 –

“结果短暂出现然后消失。”

使用try INPUT TYPE = “按钮 ”而不是输入类型=“ 提交”。
否则（当使用输入类型= “提交”）避免表单提交，由在功能合计（）返回假，并把的onclick = “总回报（）”。

来源

2014-04-22 20:32:51 Vatsal

在同一页输出表单结果

回答

相关问题