Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Javascript calculator clears results when using custom button

    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">
    <!--The visuals for the graphic-->

    <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&ouml;he</font>
    <br /><a href="#" style="font-size:10px">Wie messe ich die Schrittl&auml;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&ouml;e:</div></td>
    <td><input name="Insleg"></td>
    </tr>

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

    <tr>
    <td>&nbsp;</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&ouml;e:</strong></div></td>
    <td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> &nbsp;<strong>CM</strong>
    <br /><br /><input name = "FramesizeInch"> &nbsp;<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>

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    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?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Apologies should be:

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

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    there’s no form attribute in this button …

    PS. do you have a test page? I’m too lazy to copy all the code.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    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
    Last edited by Dormilich; 02-15-2010 at 02:45 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    as you describe. but I noticed, you somehow manage to submit the form. that’s why the values get "deleted".
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #9
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    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&ouml;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
    Last edited by Dormilich; 02-15-2010 at 03:15 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #11
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #12
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    play with the border, Firebug shows the <button> having a border of 1/7/7/3 px.

    Quote Originally Posted by nico_icecold View Post
    - My German is as bad as my JS
    that’s nothing to be ashamed of, Mr. Hodges. at least, where the German is concerned.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    nico_icecold (02-15-2010)

  • #13
    New Coder
    Join Date
    Dec 2008
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #14
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,133
    Thanks
    12
    Thanked 332 Times in 328 Posts
    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)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •