Javascript calculator clears results when using custom button

nico_icecold · 02-15-2010, 02:06 PM

Hi All,

Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this:

When I use the input type = button or submit, then the calculator works fine

BUT

I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads

I have made the button line in bold. All help appreciated!!

Many thanks

Here is my code:

<html>
<head>

<script language="JavaScript">
function Framesize(BikeSizer)
{
var a = parseFloat(BikeSizer.Insleg.value);
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;

}
</script>

</head>
<body>

<Form name="BikeSizer">


<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td>
</tr>
</table>

<table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;">
<tr>
<td colspan="2" valign="middle" align="left">
<div style="padding:2px 5px 5px 12px;">
<font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenhöhe</font>
<br /><a href="#" style="font-size:10px">Wie messe ich die Schrittlänge richtig?</a></div>
</td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td>
<td><select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select></td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritthöe:</div></td>
<td><input name="Insleg"></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td> </td>
<td><div style="padding:6px 0 8px 0;">
<input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)>
</div></td>
</tr>

<tr>
<td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenhöe:</strong></div></td>
<td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM">  <strong>CM</strong>
<br /><br /><input name = "FramesizeInch">  <strong>Zoll</strong>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td>
</tr>
</table>
</FORM>

Dormilich · 02-15-2010, 02:14 PM

Quote:

Code:

onClick=Framesize(BikeSizer)

not sure what this should refer to. forms are usually referred as

Code:

document.form_name
// or
document.forms[form_number]

passing a string seems, er, useless?

nico_icecold · 02-15-2010, 02:27 PM

Apologies should be:

<input type="image" NAME="calc" src="images/berechnen_btn.gif" onClick=Framesize(this.form)>

Dormilich · 02-15-2010, 02:28 PM

there’s no form attribute in this button …

PS. do you have a test page? I’m too lazy to copy all the code.

nico_icecold · 02-15-2010, 02:39 PM

Hmm okay , I thought that this.form would just use the form that is on the page and I have defined the form in my function.

I'm a little new to JS so apologies and many thanks

Here is the calc: http://www.nico-online.co.uk/calculator/calc1.html

Dormilich · 02-15-2010, 02:41 PM

this refers to the actual element (to be precise, the actual object’s owner, but that would turn into a longer discussion)

it works in FF 3.6

nico_icecold · 02-15-2010, 02:49 PM

Okay That's the one with the 'button' as type - I ned to use a custom button see if this one works for you:

http://www.nico-online.co.uk/calcula...ramesizeInch=3

For me - it just clears after submitting the results

Dormilich · 02-15-2010, 02:53 PM

as you describe. but I noticed, you somehow manage to submit the form. that’s why the values get "deleted".

nico_icecold · 02-15-2010, 02:59 PM

I have written anything to submit the form, the only thing I change is this:

The one that works looks like this;

<input type="button" NAME="calc" VALUE="Calculate" onClick=Framesize(this.form)>

The one that doesn't work looks like this:
<input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(this.form)>

Anything stand out in that?

Dormilich · 02-15-2010, 03:03 PM

yepp, just looked it up. type="image" is equivalent to type="submit".

try

PHP Code:


			
<button onclick="Framesize()">
    <img src="images/berechnen_btn.gif" alt="berechnen" width="92" height="22" title="Bitte hier klicken, um die Berechnung zu starten">
</button>

PS. it’s "Schritthöhe"/Schritthöhe

personally I’d do it like

PHP Code:


			
// HTML
<button id="calculate">
    <img src="images/berechnen_btn.gif" alt="berechnen" width="92" height="22" title="Bitte hier klicken, um die Berechnung zu starten">
</button>

// JS
// addEvent is a cross-browser implementation of the DOM Event spec (thanks to IE this is necessary)
document.getElementById("calculate").addEvent("click", Framesize);

but that requires some further understanding

nico_icecold · 02-15-2010, 03:18 PM

HA! Yes - there was just one thing missing:

<button type="button" onclick="Framesize()">
<img src="images/berechnen_btn.gif" alt="berechnen" width="92" height="22">
</button>

As it was still submitting. The only issue is that big grey button behind my button - any ideas .. if not dont worry, will have a play with some css to get rid of it.

http://www.nico-online.co.uk/calculator/calc1.html

- My German is as bad as my JS

Dormilich · 02-15-2010, 03:23 PM

play with the border, Firebug shows the <button> having a border of 1/7/7/3 px.

Quote:

Originally Posted by nico_icecold

- My German is as bad as my JS

that’s nothing to be ashamed of, Mr. Hodges. at least, where the German is concerned.

nico_icecold · 02-15-2010, 03:25 PM

Yep - got it - FINALLY!! LOL Thanks very much! I will probably be posting something else v.soon so keep an eye out for me!

You've been a great help

Dormilich · 02-15-2010, 03:28 PM

well, I’ve been lucky it was relatively simple.

PS. get some good references, makes programming easier. (JavaScript -> MDC, very technical, but good for look-up)