CODEWITHSUNDEEP
javascripthtml
user3112615
user3112615

Reputation: 1

Javascript "total" box not adding up

Please help me script this form. I just need the "total" box to calcuate as someone clicks on the radio buttons. I received part of the answer here from another question and I tried to follow the answer but it's not working. I am obviously missing something else and my knowledge of JS isn't advanced enough to figure it out. Can you look my code and tell me what I'm missing or doing wrong? Thanks.(I apologize for the messy formatting)

<html>
<head>
    <title> HTML and JavaScript </title>
    <script type="text/javascript">

    function towerPic()
    {}
    function doClear()
    {
        document.AddressForm.customer.value = "";
        document.AddressForm.address.value = "";
        document.AddressForm.city.value= "";
        document.AddressForm.state.value = "";
        document.AddressForm.zip.value = "";
        document.AddressForm.phone.value= "";
        document.AddressForm.email.value= "";
        document.AddressForm.total.value= "0.00";

        document.ComputerForm.cases[0].checked = false;
        document.ComputerForm.cases[1].checked = false;
        document.ComputerForm.cases[2].checked = false;

        document.ComputerForm.monitors[0].checked = false;
        document.ComputerForm.monitors[1].checked = false;
        document.ComputerForm.monitors[2].checked = false;

        document.ComputerForm.printers[0].checked = false;
        document.ComputerForm.printers[1].checked = false;
        document.ComputerForm.printers[2].checked = false;

        return;
    }

    var prices = new Object();
    function updateTotal () {
        var total = 0.00;
        for (var price in prices) {
            total += price;
        }
        document.getElementById("total").value = total;
    }
    </script>
</head>
<body>
<h1 align="center">Computer System Order Form</h1>
<table border="black" cellpadding="10px" align="center"> 
    <tr> 
        <td>
            <table cellpadding="10px">
            <form name="ComputerForm">
            <tr>
                <td>
                    Computer Case Style:</br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(500.00); updateTotal();"id="desktop" value="500.00" /> Desktop Case (500.00) </br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(600.00); updateTotal();"id="mini" value="600.00" /> Mini-Tower Case (600.00) </br>
                    <input type="radio" onclick="towerPic()" name="cases" onchange="javascript:prices['cases'] = parseInt(700.00); updateTotal();" id="full" value="700.00" /> Full-Tower Case (700.00) </br>
                </td>
                <td>
                    <img src="case.jpg" width="125" height = "125" id="pcCase" > 
                </td>
            </tr>
            <tr>
                <td>
                    Computer Monitor: <br/>
                    <input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
                    <input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
                    <input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00)    </br>
                </td>
                <td>
                    <img src="monitor.jpg" width="125" height = "125" alt="pc monitor" />
                </td>
            </tr>
            <tr>
                <td>
                    Computer Printer:<br/>
                    <input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
                    <input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
                    <input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
                </td>
                <td>
                    <img src="printer.jpg" width="125" height = "125" alt="pc printer" />
                </td>
            </tr>
            </form>
            </table> 
        </td> 
        <td>
            <table padding="10px">
            <tr>
                <form name="AddressForm">
                <td>Total System Price:</td>
                <td>$<input type="text" name="total" readonly value="0.00" size="8"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>Full Name:</td>
                <td><input type="text" name="customer" /></td>
            </tr>
            <tr>
                <td>Street Address:</td>
                <td><input type="text" name="address" /></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><input type="text" name="city" /></td>
            </tr>
            <tr>
                <td>State:</td>
                <td><input type="TEXT" name="state" size="2"></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td><input type="text" name="zip" /></td>
            </tr>
            <tr>
                <td>Phone Number:</td>
                <td><input type="text" name="phone" /></td>
            </tr>
            <tr>
                <td>Email Address:</td>
                <td><input type="text" name="email"></td>
            </tr>
            </form>
            <tr>
                 <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Submit Order" onClick="doSubmit()" />
                </td>
                <td>
                    <input type="button" value="Clear Form" onClick="doClear()" />
                </td>
            </tr>
            </table> 
        </td> 
    </tr> 
</table>
</body> 
</html>

Upvotes: 0

Views: 107

Answers (1)

Farce
Farce

Reputation: 175

You should use an id instead of only a name:

$<input type="text" name="total" id="total" readonly value="0.00" size="8">

Also, you may want to do something like this to fill the array of prices:

<input type="radio" onchange="updateTotal(this.id, this.value)" id="desktop" value="500.00" /> Desktop Case (500.00) </br>

so that you can store and use those values in your script more easily and uniformly.

Upvotes: 1

Related Questions