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

    HTML Table Invoice With Drop Down Menu Variables

    Hi guys,

    I'm relatively new to programming, I need some help tweaking/adding to the following JS code.

    I'm trying to build a little calculator in an html table (think of it as an invoice) and I'd like to be able to add cells together depending on a drop down cell. I will end up doing this for a few different drop down cells.

    I tried starting with the fast track drop down menu, it's a simple yes/no menu and if this cell is marked by the user with 'Yes', then I would need to add $10 to the grand total. Otherwise, if its marked as 'No' it can be skipped.

    Here's the code I have now, I need some help with the JS function specifically:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jump_Ace's CGC Submission Calculator</title>
        <style type="text/css">
            .style1
            {
                width: 50px;
                text-decoration: underline;
                font-weight: bold;
            }
            .style2
            {
                height: 30px;
            }
            .style3
            {
                width: 50px;
                height: 30px;
            }
            .style5
            {
                width: 221px;
                height: 30px;
            }
            .style6
            {
                text-decoration: underline;
                font-weight: bold;
            }
            .style7
            {
                width: 221px;
                text-decoration: underline;
                font-weight: bold;
            }
            </style>
    </head>
    <body>
    <center>
    <Script Language="JavaScript">
        function Calculate() {
            var table = document.getElementById('table');
            var items = table.getElementsByClassName('cost');
            var fast_track = table.getElementByClassName('Fast_Track');
            var sum = 0;
            if (fast_track = 'Yes') {
                for (var i = 0; i < items.length; i++)
                    sum += parseInt(items[i].value) & parseFloat(ft.value);
                var output = document.getElementById('sum');
                output.innerHTML = sum;
            }
            else {
                for (var i = 0; i < items.length; i++)
                    sum += parseInt(items[i].value);
                var output = document.getElementById('sum');
                output.innerHTML = sum;
            }
        }
    </SCRIPT>
    <table id="outside_table" border="0" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4" bordercolor="#FFFFFF">
    <tr>
    <td height="180" bgcolor="#FFFFFF" TD ALIGN="CENTER"><font face="Palatino Linotype" size="5" color="#2A759D">Jump_Ace's CGC Submission Calculator</font>
    <br />
    <br />
    <CENTER>
    <font face="Palatino Linotype" color="#2A759D">
    <table cellspacing=0 cellpadding=4 id="table">
    <tbody>
    <tr><td class="style7" align="center">Select From These Menus</td>
        <td class="style1" align="center">Quantity</td><td colspan="2" align="center" 
            class="style6">Comic Name</td><td align="center" class="style6">
        Issue</td><td align="center" class="style6">Cost</td></tr>
    <tr><td class="style5">
        Submission Type</td><td class="style3">
        <input  style="width:50px" type="text" /></td><td colspan="2" class="style2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2"><input class="cost" style="width:50px"  type=text maxlength=7/></td></tr>
    <tr><td class="style5">
        <select name="Drivetrain" style="width: 150pt">
    										<option value="Comics">Comics</option>
    										<option value="Magazines">Magazines</option>
    										<option value="Signature Series Comics">Signature Series Comics</option>
    										<option value="Signature Series Magazines">Signature Series Magazines</option>
    										</select></td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2"><input class="cost" style="width:50px" type=text maxlength=7/></td></tr>
    </tbody>
    <tfoot>
    <tr><td class="style5">
        Submission Tier</td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        <select name="Type" align="center">
    										<option value="Modern">Modern</option>
    										<option value="Value">Value</option>
    										<option value="Economy">Economy</option>
    										<option value="Standard">Standard</option>
                                            <option value="Express">Express</option>	
                                            <option value="Walk-Thru">Walk-Thru</option>
                                            <option value="Reholder">Reholder</option>	
                                            <option value="High Value Reholder">High Value Reholder</option>											
    										</select></td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        Fast Track</td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        <select class="Fast_Track" align="center">
    										<option value="Yes">Yes</option>
    										<option value="No">No</option>											
    										</select></td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        CGC Subscriber (10% Discount)</td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        <select name="Type" align="center">
    										<option value="Yes">Yes</option>
    										<option value="No">No</option>											
    										</select></td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        Your Shipping Costs To CGC</td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr><td class="style5">
        <input class="cost" style="width:50px" type=text maxlength=7/></td><td class="style3">
        <input  style="width:50px" type="text" /></td><td class="style2" 
            colspan="2">
        <input  style="width:400px" type="text" /></td><td class="style2">
        <input  style="width:50px" type="text" /></td><td class="style2">&nbsp;</td></tr>
    <tr>
        <td class="style7" align="right">Grand Total:</td>
        <td>
            <div id="sum" align="center"></div></td>
        <td align="right">&nbsp;</td><td>
            &nbsp;</td><td></td><td></td></tr>
        </tfoot>
    </table>
    <br />
    <br />
    <input type=button value='Calculate!' onclick="Calculate()" /></font>
    </CENTER>
    </td>
    </tr>
    </table>
    Thanks in advance for any assistance on this!


    Jerome

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    It's hard to find anything in your code, because you do not know how to handle tables. You have your head in the body and the body in the foot. You have one table inside of another table (A really bad thing) and to make it worst it's in the same row as all the input into the first table. Look up table captions.

    You should use a form to be a form. I'd start with a simple 2 liner to have costs evaluated twice. (you do need to have a price per unit and a number of units inputs)

    Your JS if needs '==' not '=':
    Code:
    if (fast_track = 'Yes')
    S/B
    Code:
    if (fast_track == 'Yes')
    I'd add the cost fields first (this is straight forward) and then add the $10 by checking the checkbox.
    Evolution - The non-random survival of random variants.


  •  

    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
    •