HTML表单工作不正常
HTML form not working properly
我在HTML页面上有一个非常简单的表单,它的工作原理如下。页面上有两个按钮"计算"answers"重置"。用户输入3个数字,当他们单击"计算"时,它会将这些值相加,还会计算每个数字的1%、2%和3%(也会将这些数值相加)。输出显示在一个表格中,看起来像这样:
input %
input %
input %
total total
calculate reset
现在我比较烦人的问题是,我用图像替换了按钮,因为我已经这样做了,一旦我点击"计算",值就不会一直填充在表单中,而在FF中,页面"刷新"并跳回顶部,这很烦人!我做错了什么?这是JS:
var sInput,dInput,pInput,inputTotal,sMonthly,dMonthly,pMonthly,sAnnual,dAnnual,pAnnual,monthlyT otal,annualTotal;
function takeInput()
{
sInput=parseFloat(document.forms[0].txt1st.value);
dInput=parseFloat(document.forms[0].txt2nd.value);
pInput=parseFloat(document.forms[0].txt3rd.value);
inputTotal=sInput+dInput+pInput;
document.forms[0].spendtotal.value="£ " + inputTotal;
}
function isNan()
{
if (isNaN(sInput || pInput || dInput) == true) {
alert("You entered an invalid character. Please reset the form.");
}
else {
return(false);
}
}
function calculateMonthly()
{
sMonthly=sInput*0.01;
dMonthly=dInput*0.02;
if (pInput >= 300) {
pMonthly=300*0.03;
}
else
{
pMonthly=pInput*0.03;
}
monthlyTotal=sMonthly+dMonthly+pMonthly;
//rounded up numbers to the nearest whole number
//i.e. .5+
document.forms[0].supermarket.value="£ " + Math.round(sMonthly);
document.forms[0].deptstores.value="£ " + Math.round(dMonthly);
document.forms[0].petrol.value="£ " + Math.round(pMonthly);
document.forms[0].monthlytext.value="£ " + Math.round(monthlyTotal);
}
function calculateAnnual()
{
sAnnual=sMonthly*12;
dAnnual=dMonthly*12;
pAnnual=pMonthly*12;
annualTotal=sAnnual+dAnnual+pAnnual;
document.forms[0].supermarketAnnual.value="£ " + Math.round(sAnnual);
document.forms[0].departmentstoreAnnual.value="£ " + Math.round(dAnnual);
document.forms[0].petrolAnnual.value="£ " + Math.round(pAnnual);
document.forms[0].annualresult.value="£ " + Math.round(annualTotal);
}
这是表单中的代码:
<input type="image" src="calculate-btn.gif" onClick="takeInput();calculateMonthly();calculateAnnual();">
<input type="image" src="reset-btn.gif" />
奇怪的是,如果我不使用图像,那么表单将保持填充输出,并且按钮工作正常。请温柔一点,我是一个不折不扣的Javascript Noob。
感谢
我认为image按钮充当提交按钮,并将表单发布到服务器。试试这个:
<input type="image" src="calculate-btn.gif" onClick="takeInput();calculateMonthly();calculateAnnual();return false;">
return false
将取消提交表单。
在您感兴趣的数字字段上输入一个id:
<input type='text' id='num1' ....>
然后在javascript函数var num1=document.getElementById('num1');
中,你不会错的。我不建议你使用你所做的引用,因为如果表单发生变化(当你添加另一个表单时),引用也会发生变化
希望它能帮助
我会将您的输入更改为实际图像
<a href="#" onclick="takeInput();calculateMonthly();calculateAnnual();">
<img src="calculate-btn.gif" />
</a>
<a href="#">
<img src="reset-btn.gif" />
</a>
您的另一个选择是将return false;
添加到onclick属性的末尾。
这是因为您的图像就像一个提交按钮。
将return false;
添加到您的图像onClick
属性中!
相关文章:
- Javascript.getHours()工作不正常
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- 谷歌分析跟踪内部链接不正常工作的事件
- 电话间隙 2.8 位置:固定不正常工作
- GMT . sehours不正常工作
- Jquery幻灯片效果不正常工作
- D3拖动不正常工作
- Jquery搜索字符串从跨度不正常工作
- 美元的范围.在使用MongoDB的controller.js中编辑不正常工作
- 随机音乐播放通过HTML javascript不正常工作
- 华丽的jQuery图像库插件不正常工作,只有在网站的一部分
- Javascript按钮在时钟当前计时不正常工作
- 导航器显示Internet连接状态.联机不正常工作,并显示错误的状态,而互联网没有连接
- jQuery切换不正常工作的第二次
- 谷歌API自动完成不正常工作
- 触摸结束事件不正常工作在铬
- 如何修复HTML5视频Javascript跟踪代码不正常工作
- 为什么第二次按钮点击不正常工作
- 美元.ajax不正常工作在我的代码
- 切换显示的潜水在道场不正常工作在谷歌Chrome浏览器