A little help with JavaScript please

[shiver]

We have a lbs to kg converter on our home page honeybeez.co.uk (not yet live but viewable), it's misbehaving by going to the top of the page and dumping the result when submiting (converting) the form.

<script>
<!-- hide script
function calc(val,factor,putin) {
if (val == "") {
val = "0"
}
evalstr = "document.ConverTable."+putin+ ".value = "
evalstr = evalstr + val + "/" + factor

document.ConverTable.ckgrams.value=Math.round((eval(evalstr))*100)/100

}
// unhide script -->
</script>
<form NAME="ConverTable">
<table border="0" align="center">
<tr><td colspan=2 align="center"><b>Convert lbs to Kgs</b></td></tr>
<tr><td align="center">lbs <input SIZE="10" onChange="calc(this.value,2.2,'ckgrams')"> > </td>
<td align="center"><input NAME="ckgrams" SIZE="10"> kgs</td></tr>
<tr><td colspan=2 align="center"><input type="image" value="convert" src="http://www.honeybeez.co.uk/acatalog/convert.gif" border="0" alt="convert"><input type="image" value="reset" src="http://www.honeybeez.co.uk/acatalog/reset.gif" border="0" alt="reset"></td></tr>
</table>

</form>

any ideas why? it worked fine until we changed the buttons to images.
TNX for your help.

[NormanRouxel]

An <input type="image"...> tag submits a form. A button does nothing special.

Replace the <input type="image"...> stuff with

<img style="cursor: pointer" src="http://www.honeybeez.co.uk/acatalog/convert.gif" border="0" alt="convert" onclick="calc(document.ConverTable.pounds.value,2.2,'ckgrams')">

Also add the fragment id="pounds" to the pounds field and use an id="ckgrams" tag in your results field or it won't work in FireFox as getElementById strictly should only work on id= NOT name= tags. IE is a bit more relaxed and uses the name= as the id if there's no id tag.

and do something similar for the Reset image.

Code above is untested but I'm sure you'll get the idea.

Another way would be to amend your convert function to take a source and destination argument and alter the code to call calc('pounds',2.2,'ckgrams')

[shiver]

Thanks Norman,
I was hoping you'd be lurking on the forum somewhere, so I'd get a speedy answer

The final code used:

Head script- <script> to </script> no change from above.

form:

<form NAME="ConverTable">
<table border="0" align="center">
<tr><td colspan=2 align="center"><b>Convert lbs to Kgs</b></td></tr>
<tr><td align="center">lbs <input SIZE="10" onChange="calc(this.value,2.2,'ckgrams')"id="pounds"> > </td>
<td align="center"><input id="ckgrams" SIZE="10"> kgs</td></tr>
<tr><td colspan=2 align="center"><img style="cursor: pointer" src="http://www.honeybeez.co.uk/acatalog/convert.gif" border="0" alt="convert" onclick="calc(document.ConverTable.pounds.value,2.2,'ckgrams')"><a href="javascript:document.ConverTable.reset()"><img style="cursor: pointer" src="http://www.honeybeez.co.uk/acatalog/reset.gif" border="0" alt="reset"></a>
</td></tr>
</table>

</form>

Thanks again

[NormanRouxel]

Great. I'd put a name= and an id= in both inputs. Also a space before the id= might be good below.

onChange="calc(this.value,2.2,'ckgrams')"id="pounds">

It's always a good idea to test with FireFox and Opera as well as IE.

[shiver]

Thanks Norman, good tip will do.

[NormanRouxel]

Firefox is great for debugging JavaScript problems. Use Tools / JavaScript COnsole and you get accurate diagnostics.

[shiver]

For anybody who may be intrested heres the link for Firefox