HTML 表单无法正常工作答案

【问题标题】：HTML form not working properlyHTML 表单无法正常工作
【发布时间】：2011-09-20 06:46:01
【问题描述】：

我在一个 HTML 页面上有一个非常简单的表单，它的工作原理如下。页面上有 2 个按钮“计算”和“重置”用户输入 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 菜鸟。

谢谢

【问题讨论】：

标签： javascript html css forms

【解决方案1】：

我认为图像按钮充当提交按钮并将表单发布到服务器。试试这个：

<input type="image" src="calculate-btn.gif" onClick="takeInput();calculateMonthly();calculateAnnual();return false;">

return false 将取消提交表单。

【讨论】：

【解决方案2】：

在你感兴趣的数字字段上加上一个id：

<input type='text' id='num1' ....>

然后在 javascript 函数中var num1=document.getElementById('num1'); 你不会错的。我不建议您使用您所做的引用，因为如果表单更改（当您添加另一个表单时），引用也会更改。

希望对你有帮助

【讨论】：

【解决方案3】：

我会将您的输入更改为实际图像

<a href="#" onclick="takeInput();calculateMonthly();calculateAnnual();">
    <img src="calculate-btn.gif" />
</a>
<a href="#">
    <img src="reset-btn.gif" />
</a>

您的另一个选择是将return false; 添加到 onclick 属性的末尾。

【讨论】：

不好的做法。浏览器不知道它们是按钮，一方面，这意味着您无法使用键盘切换到它们。

【解决方案4】：

这是因为你的图片就像一个提交按钮。

将return false; 添加到您的图像onClick 属性！

【讨论】：