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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript calculation help..

    Hi all,

    I'll try to attach the javascript file?

    First of all I have only about 4 hours experience with Javascript so please go easy on me.
    I'm trying to build a pricing calculator for my website so that clients can price up items without ringing me all the time.
    I downloaded a basic free calculator and throught a lot of trial and error I managed to get the first panel done (believe it or not but I was pretty proud of myself.. don't laugh)
    The problem is with doing the next panel. I can paste the HTML from the first one down and change it to what I need. I can't get the javascript to control the second panel seperatley. I've tried copying the Javascript maths bit at the top in different ways but no luck. I renamed anything I could find that I thought related between The Javascript and the HTML..

    What I really need to know is how to control the second panel and more panels is that's possible.

    I hope I've explained myself ok..

    Many thanks

    Anto
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem with your code is the button on the second panel is still looking at the information in the first panel and in fact updating the price on the first panel. In other words, the button in the second panel does exactly the same thing as the first one. You can test this by running yours and clicking the second panel button. It will put a price in the first panel.

    So the solution is to make the code for each button look at a different panel. To do this I changed doMath() to take an argument which is the name of the panel you want to change. So the first panel button calls:

    doMath('single');

    and the second calls

    doMath('Yleads');

    Then the doMath will look in the correct form for the information as well as where to write the answer. While I was there I changed eval() to parseFloat() which is really what you want. I had to make a few other changes like to name the 3rd connector select element "con3" and add it to the doMath() but it checks to see if it exists for it adds it in.

    Here is the changes I made. I tried to change as little as possible so there are some things done the way I wouldn't normally do them, but it seems to work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Begin
    function  doMath(s) {
      var form = document.getElementsByName(s)[0];
      var one = parseFloat(form.con1.value);
      var two = parseFloat(form.cable.value);  
      var three = parseFloat(form.length.value);
      var four = parseFloat(form.con2.value); 
      var five = 0.0;
      if (form.con3) {
        five = parseFloat(form.con3.value);
      }
      var prod = (two * three) + one + four + five;
    
      form.amount.value=custRound(prod,3);
    }
    
    function custRound(x,places) {
      return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
    }
    
    // End -->
    
    
    </SCRIPT>
    
    </head>
    
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <CENTER>
    <FORM NAME="single">
        <table width="75%" border="1">
          <tr>
            <td height="490"><div align="center"> 
                <table width="75%" border="0">
                  <tr>
                    <td width="22%">&nbsp;</td>
                    <td width="53%"><div align="center"><font color="#333333" size="+1"></font></div></td>
                    <td width="25%">&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                </table>
                <table width="75%" border="0">
                  <tr>
                    <td><div align="center"><font color="#333333" size="5" face="Geneva, Arial, Helvetica, sans-serif">Single 
                        Cables</font></div></td>
                  </tr>
                </table>
                <table width="75%" border="1" bgcolor="#333333">
                  <tr>
                    <td height="84"><div align="center">
                        <table width="673" height="120" border="0" cellspacing="0">
                          <tr> 
                            <td height="18" valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector 
                                type (1) </strong></font></div></td>
                            <td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Cable 
                                Type </strong></font></div></td>
                            <td valign="bottom"><p align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Lenght 
                                per mtr. </strong></font></p></td>
                            <td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector 
                                type (2) </strong></font></div></td>
                          </tr>
                          <tr valign="top"> 
                            <td height="26"> <div align="center"> 
                                <select name="con1">
                                  <option value="5.73" selected>Male XLR</option>
                                  <option value="6.26">Female XLR</option>
                                  <option value="6.83">Stereo Jack (TRS)</option>
                                  <option value="5.70">Mono Jack</option>
                                  <option value="4.05">Phono (RCA)</option>
                                  <option value="4.05">Minijack</option>
                                </select>
                              </div></td>
                            <td><div align="center"> 
                                <select name="cable">
                                  <option value="2.05">Gotham GAC-3</option>
                                  <option value="1.05">Cordial CMK222</option>
                                </select>
                              </div></td
            >
                            <td><div align="center"> 
                                <input name="length" type="text" size="5">
                              </div></td>
                            <td><div align="center"> 
                                <select name="con2">
                                  <option value="5.73" selected>Male XLR</option>
                                  <option value="6.26">Female XLR</option>
                                  <option value="6.83">Stereo Jack (TRS)</option>
                                  <option value="5.70">Mono Jack</option>
                                  <option value="4.05">Phono (RCA)</option>
                                  <option value="4.05">Minijack</option>
                                </select>
                              </div></td>
                          </tr>
                          <tr> 
                            
                        <td height="71">&nbsp; </td>
                            <td> <div align="center"> 
                                <input type="button" value="Calculate" onClick="doMath('single')" name="button">
                              </div></td>
                            <td><div align="right"><strong><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">Total----</font></strong> 
                              </div></td>
                            <td><div align="center"> 
                                <input name="amount" type="text" size="10">
                              </div></td>
                          </tr>
                        </table>
                      </div></td>
                  </tr>
                </table>
          </FORM>
      
          <FORM NAME="Yleads">
        <table width="75%" border="1">
          <tr>
            <td height="490"><div align="center"> 
                <table width="75%" border="0">
                  <tr>
                    <td width="22%">&nbsp;</td>
                    <td width="53%"><div align="center"><font color="#333333" size="+1"></font></div></td>
                    <td width="25%">&nbsp;</td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                  </tr>
                </table>
                <table width="75%" border="0">
                  <tr>
                    <td><div align="center"><font color="#333333" size="5" face="Geneva, Arial, Helvetica, sans-serif">Yleads</font></div></td>
                  </tr>
                </table>
                <table width="75%" height="214" border="1" bgcolor="#333333">
                  <tr>
                    <td height="170"><div align="center">
                        
                    <table width="673" height="157" border="0" cellspacing="0">
                      <tr> 
                        <td height="26" valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector 
                            type (1) </strong></font></div></td>
                        <td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Cable 
                            Type </strong></font></div></td>
                        <td valign="bottom"><p align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Lenght 
                            per mtr. </strong></font></p></td>
                        <td valign="bottom"><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector 
                            type (2) </strong></font></div></td>
                      </tr>
                      <tr valign="top"> 
                        <td height="26"> <div align="center"> 
                            <select name="con1">
                              <option value="5.73" selected>Male XLR</option>
                              <option value="6.26">Female XLR</option>
                              <option value="6.83">Stereo Jack (TRS)</option>
                              <option value="5.70">Mono Jack</option>
                              <option value="4.05">Phono (RCA)</option>
                              <option value="4.05">Minijack</option>
                            </select>
                          </div></td>
                        <td><div align="center"> 
                            <select name="cable">
                              <option value="2.05">Gotham GAC-3</option>
                              <option value="1.05">Cordial CMK222</option>
                            </select>
                          </div></td
            >
                        <td><div align="center"> 
                            <input name="length" type="text" size="5">
                          </div></td>
                        <td><div align="center"> 
                            <select name="con2">
                              <option value="5.73" selected>Male XLR</option>
                              <option value="6.26">Female XLR</option>
                              <option value="6.83">Stereo Jack (TRS)</option>
                              <option value="5.70">Mono Jack</option>
                              <option value="4.05">Phono (RCA)</option>
                              <option value="4.05">Minijack</option>
                            </select>
                          </div></td>
                      </tr>
                      <tr> 
                        <td height="71" rowspan="4">&nbsp; </td>
                        <td rowspan="4"> <div align="center"> 
                            <input type="button" value="Calculate" onClick="doMath('Yleads')" name="button">
                          </div></td>
                        <td height="21"><div align="right"><strong></strong> </div></td>
                        <td><div align="center"><font color="#666666" size="2" face="Geneva, Arial, Helvetica, sans-serif"><strong>Connector 
                            type (3) </strong></font></div></td>
                      </tr>
                      <tr> 
                        <td height="26"><div align="center"></div></td>
                        <td><div align="center"> 
                            <select name="con3">
                              <option value="5.73" selected>Male XLR</option>
                              <option value="6.26">Female XLR</option>
                              <option value="6.83">Stereo Jack (TRS)</option>
                              <option value="5.70">Mono Jack</option>
                              <option value="4.05">Phono (RCA)</option>
                              <option value="4.05">Minijack</option>
                            </select>
                          </div></td>
                      </tr>
                      <tr> 
                        <td height="21"><div align="right"><strong></strong></div></td>
                        <td> <div align="center"></div></td>
                      </tr>
                      <tr> 
                        <td height="13"><div align="right"><strong><font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">Total----</font></strong></div></td>
                        <td> <div align="center"> 
                            <input name="amount" type="text" size="10">
                          </div></td>
                      </tr>
                    </table>
                      </div></td>
                  </tr>
                </table>
          </FORM>
        
          </CENTER>
    
    
    </body>
    </html>
    david_kw

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for your responses. I'm going to have a look at both of them now.
    I really appriciate this...

    Anto


  •  

    Posting Permissions

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