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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy JavaScript vars using form

    <html>
    <head>
    <title>JavaScript</title>
    <style type="text/css">
    <!--
    body {
    margin: 30px 0px; padding: 0px;
    text-align:center;
    font-family: arial, helvetica;
    background: url('graphics/patterns1.jpg');
    }



    .hnav {
    font: bold 13px arial;
    padding: 6px 0;
    margin: 0;
    width: 60%;
    background-color: #FFF2BF;
    text-align: center;
    }

    .hnav li {
    list-style: none;
    display: inline;
    }

    .hnav li a {
    padding: 3px 0.5em;
    text-decoration: none;
    color: black;
    background-color: #FFF2BF;
    border: 2px solid #FFF2BF;
    }

    .hnav li a:hover {
    color: black;
    background-color: #FFE271;
    border-style: outset;
    }

    .hnav li a:active {
    border-style: inset;
    }

    table.main {
    border: solid 4px;
    border-top-color: #515f58;
    border-left-color: #9c6141;
    border-bottom-color: #515f58;
    border-right-color: #9c6141;
    width: 20%;
    }

    th {
    color:#DAA520;
    font-size: 110%;
    }



    a:link {
    color:#000000;
    text-decoration: none;
    }

    a:visited {
    text-decoration: none;
    }

    a:active {
    text-decoration: none;
    }

    a:hover {
    text-decoration: none;
    background-color:#FFE271;
    }




    -->
    </style>

    <script type="text/javascript">
    <!-- hide from old browsers

    function process()
    {
    var q1, q2, q3, q4, total1, total2, total3, total4;

    num1 = parseInt(document.myform.quantity1.value);
    num2 = parseInt(document.myform.quantity2.value);
    num3 = parseInt(document.myform.quantity3.value);
    num4 = parseInt(document.myform.quantity4.value);

    if (isNaN(num1) || isNaN(num2) || isNaN(num3) || isNaN(num4))
    {
    window.alert("One inputted value is not a number - try again?");
    }
    else
    {
    total1 = num1 * 239.99;
    total2 = num2 * 129.75;
    total3 = num3 * 99.95;
    total4 = num1 * 350.89;

    sum = total1 + total2 + total3 + total4;
    weekly earnings = 200 + .09 * sum;

    document.myform.n1.value = num1;
    document.myform.t1.value = "$" + total1.toFixed(2);
    document.myform.n2.value = num2;
    document.myform.t2.value = "$" + total2.toFixed(2);
    document.myform.n3.value = num3;
    document.myform.t3.value = "$" + total3.toFixed(2);
    document.myform.n4.value = num4;
    document.myform.t4.value = "$" + total4.toFixed(2);
    document.myform.sub_total.value = "$" + sum.toFixed(2);
    document.myform.wkly_earnings.value = "$" + weekly_earnings.toFixed(2);
    }
    }
    //-->
    </script>
    </head>
    <body>
    <div align="center">

    <h2>not decided</h2>

    <ul class="hnav">
    <li><a href="underconst.html">HOME</a></li>
    <li><a href="">?</a></li>
    <li>?</li>
    <li><a href="underconst.html">3</a></li>
    <li><a href="underconst.html">4</a></li>

    <li><a href="underconst.html">5</a></li>
    <li><a href="underconst.html">6</a></li>
    <li><a href="underconst.html">7</a></li>
    <li><a href="underconst.html">8</a></li>
    <li><a href="underconst.html">9</a></li>
    </ul>

    <br /><br />


    <form name="myform">

    <table class="main" border="0" cellpadding="10" bgcolor="#f4e09c">

    <tr><th>Item#</th><th>Price</th><th>Quantity</th><th>Total</tr>
    <tr>
    <td text align="center">1</td>
    <td>$239.99</td>
    <td><input type="text" name="quantity1" size="8" /></td>
    <<td><input type="text" name="t1" size="8" /> </td>
    </tr>

    <tr>
    <td text align="center">2</td>
    <td>$129.75</td>
    <td><input type="text" name="quantity2" size="8" /></td>
    <td><input type="text" name="t2" size="8" /> </td>
    </tr

    <tr>
    <td text align="center">3</td>
    <td>$99.75</td>
    <td><input type="text" name="quantity3" size="8" /></td>
    <td><input type="text" name="t3" size="8" /> </td>
    </tr

    <tr>
    <td text align="center">4</td>
    <td>$350.89</td>
    <td><input type="text" name="quantity4" size="8" /></td>
    <td><input type="text" name="t4" size="8" /> </td>
    </tr
    <tr>
    <td colspan="3">Total Amount Sold</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    </tr>
    <tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    </table>
    <br><input type="button" onclick="process()" value="SUBMIT" /><input type="reset" value="RESET" />






    </form>



    </div>
    </body>
    </html>
    Last edited by bern; 09-14-2008 at 01:49 PM. Reason: change title to HELLLLLP!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    And your question is?

    At a glance you have two elements with the same name sub_total.

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't figure out where I'm wrong with my javascript because it doesnt show up the results. And by the way, it's my first time to join a forum.

  • #4
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    Ok, there are a few problems in this, I'll run through them then post the cleaned Javascript

    in this bit of code:

    Code:
    num1 = parseInt(document.myform.quantity1.value);
    num2 = parseInt(document.myform.quantity2.value);
    num3 = parseInt(document.myform.quantity3.value);
    num4 = parseInt(document.myform.quantity4.value);
    your document.myform.qua-- isn't valid. Try document.forms.myform, thus:

    Code:
    num1 = parseInt(document.forms.myform.quantity1.value);
    num2 = parseInt(document.forms.myform.quantity2.value);
    num3 = parseInt(document.forms.myform.quantity3.value);
    num4 = parseInt(document.forms.myform.quantity4.value);
    (this happens later in the file as well)

    Your 'weekly_earnings variable is spelt without an underscore first time you use it - and decimals should be denoted as '0.23' not '.23'

    so:
    Code:
    weekly earnings = 200 + .09 * sum;
    becomes:

    Code:
    weekly_earnings = 200 + 0.09 * sum;
    the assignments at the end here:

    Code:
    document.myform.n1.value = num1;
    document.myform.t1.value = "$" + total1.toFixed(2);
    document.myform.n2.value = num2;
    document.myform.t2.value = "$" + total2.toFixed(2);
    document.myform.n3.value = num3;
    document.myform.t3.value = "$" + total3.toFixed(2);
    document.myform.n4.value = num4;
    document.myform.t4.value = "$" + total4.toFixed(2);
    What's with the n1/n2/n3/n4 values? These elements don't appear in your form.

    so, I'd clean that to:

    Code:
    document.forms.myform.t1.value = "$" + total1.toFixed(2);
    document.forms.myform.t2.value = "$" + total2.toFixed(2);
    document.forms.myform.t3.value = "$" + total3.toFixed(2);
    document.forms.myform.t4.value = "$" + total4.toFixed(2);
    weekly_earnings.toFixed(2);
    The weekly earnings text-box has the same name as sub-total does:

    Code:
    <td colspan="3">Total Amount Sold</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    </tr>
    <tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    in your code, you name this box wkly_earnings.. so:

    Code:
    <td colspan="3">Total Amount Sold</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    </tr>
    <tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text" name="wkly_earnings" size="10" /> </td>

    Your completed (and working) code, then, looks like this:

    Code:
    <html>
    <head>
    <title>JavaScript</title>
    <style type="text/css">
    <!--
    body {
    margin: 30px 0px; padding: 0px;
    text-align:center;
    font-family: arial, helvetica;
    background: url('graphics/patterns1.jpg');
    }
    
    
    
    .hnav {
    font: bold 13px arial;
    padding: 6px 0;
    margin: 0;
    width: 60%;
    background-color: #FFF2BF;
    text-align: center;
    }
    
    .hnav li {
    list-style: none;
    display: inline;
    }
    
    .hnav li a {
    padding: 3px 0.5em;
    text-decoration: none;
    color: black;
    background-color: #FFF2BF;
    border: 2px solid #FFF2BF;
    }
    
    .hnav li a:hover {
    color: black;
    background-color: #FFE271;
    border-style: outset;
    }
    
    .hnav li a:active {
    border-style: inset;
    }
    
    table.main {
    border: solid 4px;
    border-top-color: #515f58;
    border-left-color: #9c6141;
    border-bottom-color: #515f58;
    border-right-color: #9c6141;
    width: 20%;
    }
    
    th {
    color:#DAA520;
    font-size: 110%;
    }
    
    
    
    a:link {
    color:#000000;
    text-decoration: none;
    }
    
    a:visited {
    text-decoration: none;
    }
    
    a:active {
    text-decoration: none;
    }
    
    a:hover {
    text-decoration: none;
    background-color:#FFE271;
    }
    
    
    
    
    -->
    </style>
    
    <script type="text/javascript">
    <!-- hide from old browsers
    
    function process()
    {
    var q1, q2, q3, q4, total1, total2, total3, total4;
    
    num1 = parseInt(document.forms.myform.quantity1.value);
    num2 = parseInt(document.forms.myform.quantity2.value);
    num3 = parseInt(document.forms.myform.quantity3.value);
    num4 = parseInt(document.forms.myform.quantity4.value);
    
    if (isNaN(num1) || isNaN(num2) || isNaN(num3) || isNaN(num4))
    {
    window.alert("One inputted value is not a number - try again?");
    }
    else
    {
    total1 = num1 * 239.99;
    total2 = num2 * 129.75;
    total3 = num3 * 99.95;
    total4 = num1 * 350.89;
    
    sum = total1 + total2 + total3 + total4;
    weekly_earnings = 200 + 0.09 * sum;
    
    document.forms.myform.t1.value = "$" + total1.toFixed(2);
    document.forms.myform.t2.value = "$" + total2.toFixed(2);
    document.forms.myform.t3.value = "$" + total3.toFixed(2);
    document.forms.myform.t4.value = "$" + total4.toFixed(2);
    document.forms.myform.sub_total.value = "$" + sum.toFixed(2);
    document.forms.myform.wkly_earnings.value = "$" + weekly_earnings.toFixed(2);
    }
    }
    //-->
    </script>
    </head>
    <body>
    <div align="center">
    
    <h2>not decided</h2>
    
    <ul class="hnav">
    <li><a href="underconst.html">HOME</a></li>
    <li><a href="">?</a></li>
    <li>?</li>
    <li><a href="underconst.html">3</a></li>
    <li><a href="underconst.html">4</a></li>
    
    <li><a href="underconst.html">5</a></li>
    <li><a href="underconst.html">6</a></li>
    <li><a href="underconst.html">7</a></li>
    <li><a href="underconst.html">8</a></li>
    <li><a href="underconst.html">9</a></li>
    </ul>
    
    <br /><br />
    
    
    <form name="myform">
    
    <table class="main" border="0" cellpadding="10" bgcolor="#f4e09c">
    
    <tr><th>Item#</th><th>Price</th><th>Quantity</th><th>Total</tr>
    <tr>
    <td text align="center">1</td>
    <td>$239.99</td>
    <td><input type="text" name="quantity1" size="8" /></td>
    <<td><input type="text" name="t1" size="8" /> </td>
    </tr>
    
    <tr>
    <td text align="center">2</td>
    <td>$129.75</td>
    <td><input type="text" name="quantity2" size="8" /></td>
    <td><input type="text" name="t2" size="8" /> </td>
    </tr
    
    <tr>
    <td text align="center">3</td>
    <td>$99.75</td>
    <td><input type="text" name="quantity3" size="8" /></td>
    <td><input type="text" name="t3" size="8" /> </td>
    </tr
    
    <tr>
    <td text align="center">4</td>
    <td>$350.89</td>
    <td><input type="text" name="quantity4" size="8" /></td>
    <td><input type="text" name="t4" size="8" /> </td>
    </tr
    <tr>
    <td colspan="3">Total Amount Sold</td>
    <td><input type="text" name="sub_total" size="10" /> </td>
    </tr>
    <tr>
    <td colspan="3">Total Weekly Earnings:</td>
    <td><input type="text" name="wkly_earnings" size="10" /> </td>
    </table>
    <br><input type="button" onclick="process()" value="SUBMIT" /><input type="reset" value="RESET" />
    
    </form>
    
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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