HTML表单无法正常工作 [英] HTML form not working properly

问题描述

我在一个HTML页面上有一个非常简单的表单，我做的工作如下。页面计算和重置有2个按钮用户输入3个数字，当他们单击计算它的加法的值在一起，并计算每个数字的1％，2％和3％（并添加那些值一起）。输出显示在如下所示的表格中：

I've got a very simple form on an HTML page I've done which works as follows. There are 2 buttons on the page "calculate" and "reset" The user inputs 3 numbers and when they click "calculate" it add's the values together and also calculates 1%, 2% and 3% of each number (and add's those values together too). The output is displayed in a table which looks something like this:

输入％

输入％

输入％

total total

计算重设

现在我相当讨厌的问题是，我已经替换按钮的图像，并且，因为我做到这一点，一旦我点击计算值不保持填充的形式，而是令人讨厌的FF页面刷新，并跳回到顶部了！我究竟做错了什么？这里是JS：

Now my rather annoying problem is that I have replaced the buttons with images and since I've done this, once I click 'calculate' the values do not stay populated in the form and rather annoyingly in FF the page "refreshes" and skips back to the top too! What am I doing wrong? Here's the 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。

Weird thing is, if I don't use images then the form stays populated with the output and the buttons work fine. Please be gentle, I am a total Javascript Noob.

感谢

推荐答案

我认为图片按钮提交按钮并将表单发布到服务器。尝试此操作：

I think the image button is acting as a submit button and posting the form to the server. Try this:

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

return false 将取消提交形式。

这篇关于HTML表单无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！