Another Order form with radio buttons, but need no taxes, subtotals or quantities,

Still weeks into Javascript class it was a short fast pace class and I have this final project that has three class of orders with 3 options to chose from. All are radio type with amounts. There is no quantities listed nor is there tax or subtotal. The Total box should have a running balance and will clear when the Clear button is clicked.

This is what I have so far:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Javascript - Unit 2 Summary</title>
        <link href="unit2-summary.css" rel="stylesheet" type="text/css"></link>

        <script type="text/javascript">
        /*function swap()
        {
            var left = $('#leftWrapper').html();
            var right = $('#rightWrapper').html();

            $('#leftwrapper').html(left);
            $('#rightWrapper').html(right);
            return false;
        }*/


        function doClear()
        {
        document.computerForm.totalSystemPrice.value = "";

        document.ComputerForm.yourName.value = "";
        document.ComputerForm.yourAddress.value = "";
        document.ComputerForm.yourAddress2.value = "";
        document.ComputerForm.yourCityStateZip.value = "";
        document.ComputerForm.yourPhone.value = "";
        document.ComputerForm.yourEmail.value = "";

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

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

        document.ComputerForm.computerPrinter[0].checked = false;
        document.ComputerForm.computerPrinter[1].checked = false;
        document.ComputerForm.computerPrinter[2].checked = false;
        return;
        }

        function doSubmit()
        {
            if (validateText() == false)
            {
            alert("Required Data Missing - Please Complete");
            return;
            }

            if (validateRadio() == false)
            {
            alert("Required Order Data Missing - Please Complete");
            return;
            }
            alert("Your Order has been placed.");
            return;
        }

        function validateText()
        {
            var yourName = document.ComputerForm.yourName.value;
            if (yourName.length == 0) return false;
            var yourAddress = document.computerForm.yourAddress.value;
            if (yourAddress.length == 0) return false;
            var yourCityStateZip = document.ComputerForm.yourCityStateZip.value;
            if (yourCityStateZip.length == 0) return false;
            var yourPhone = document.ComputerForm.yourPhone.value;
            if (yourPhone == 0) return false;
            var yourEmail = document.ComputerForm.yourEmail.value;
            if (yourEmail == 0) return false;
            return true;        
        }

        function validateRadio()
        {
            if (document.ComputerForm.computerCase[0].checked) return true;
            if (document.ComputerForm.computerCase[1].checked) return true;
            if (document.ComputerForm.computerCase[2].checked) return true;

            if (document.ComputerForm.computerMonitor[0].checked) return true;
            if (document.ComputerForm.computerMonitor[1].checked) return true;
            if (document.ComputerForm.computerMonitor[2].checked) return true;

            if (document.ComputerForm.computerPrinter[0].checked) return true;
            if (document.ComputerForm.computerPrinter[1].checked) return true;
            if (document.ComputerForm.computerPrinter[2].checked) return true;
        }

        function getTotal()
        {
            var computerPrice()
            document.getElementById('totalPrice').value.innerHTML = "Total Computer Price $"
        }

        function startup()
        {
            var imgArray = new Array(3);
            var index = 0;

            imgArray[0] = new Image;
            imgArray[0].src = "ComputerCase.jpg";
            imgArray[1] = new Image;
            imgArray[1].src = "ComputerMonitor.jpg";
            imgArray[2] = new Image;    
            imgArray[2].src = "ComputerPrinter.jpg";
            return;
        }


        </script>
    </head>

    <body>
        <form name="ComputerForm">
        <h1 align="center">Comupter System Order Form</h1>

    <div id="container" font="courier" size="10">
        <div id="left"><div id ="leftWrapper" class="wrapper">
        <p><p></p>      
    <div class="gallery">
        <a target="_blank" href="ComputerCase.jpg">
            <img src="ComputerCase.jpg">
        </a>
    </div>
        <h4>Computer Case Style:</h4>
            <input name="computerCase" type="radio" onClick="calculateTotal()" />Desktop Case ($500.00)<br />
            <input name="computerCase" type="radio" onClick="calculateTotal()" />Mini-Tower Case ($600.00)<br />
            <input name="computerCase" type="radio" onClick="calculateTotal()" />Full Tower Case ($700.00)<br />
        <p></p>
    <div class="gallery">
        <a target="_blank" href="ComputerMonitor.jpg">          
            <img src="ComputerMonitor.jpg">
        </a>
    </div>  
        <h4>Computer Monitors</h4>
            <input name="computerMonitor" type="radio" onClick="calculateTotal()" />17" LCD Flat Screen ($250.00)<br />
            <input name="computerMonitor" type="radio" onClick="calculateTotal()" />19" LCD Flat Screen ($300.00)<br />
            <input name="computerMonitor" type="radio" onClick="calculateTotal()" />21" LCD Flat Screen ($350.00)<br />
        <p></p>
    <div class="gallery">   
        <a target="_blank" href="ComputerPrinter.jpg">
            <img src="ComputerPrinter.jpg"></a>
        </a>
    </div>  
        <h4>Computer Printers</h4>
            <input name="computerPrinter" type="radio" onClick="calculateTotal()" />Inkjet Printer ($100.00)<br />
            <input name="computerPrinter" type="radio" onClick="calculateTotal()" />Laser Printer ($250.00)<br />
            <input name="computerPrinter" type="radio" onClick="calculateTotal()" />Color Laser Printer ($350.00)<br />
        </p><p></p>
        </div>  
    </div>
    <div id="right"><div id="rightWrapper" class="wrapper">
            <br><br>

            <p>Total System Price:&nbsp;&nbsp;$
                <input name="totalSystemPrice" size="14px" type="text" id="totalPrice" class="totalPrice" readonly>
            </p>
            <br><br>
        <hr />
            <p></p><p></p><p></p>
                Name:&nbsp;&nbsp;&nbsp;&nbsp;<input name="yourName" size="50" type="text"><br />
                Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="yourAddress" size="50" type="text"><br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input name="yourAddress2" size="50" type="text"><br />
                City, State, Zip:&nbsp;&nbsp;&nbsp;<input name="yourCityStateZip" size="50" type="text"><br />
                Phone Number:&nbsp;&nbsp;&nbsp;<input name="yourPhone" size="50" type="text"><br />
                Email Address:&nbsp;&nbsp;&nbsp;<input name="yourEmail" size="50" type="text"></p>
        </p>
        <hr />
            <br><br><br>
            <div align="center">
                <input type="button" id="submit" value="Submit Order" onClick="doSubmit()">
                <input type="button" id="reset" value="Clear Values" onClick="doClear()">
            </div>
            <br />
        </div></div>
        </form>
    </body>
</html>

The CSS page is so far:

     body
    {
        color:black;
    }

p
    {
        color:black;
        font-size:12px;
        font-family: Constantia, Aldhabi, Book Antiqua;
    }

h1
    {
        color:blue;
        font-weight:bold;
        font-family:"Book Antiqua";
    }

h4
    {
        color:blue;
        font-weight:bold;
        font-family:"Book Antiqua", Arial;
    }

.gallery
{
    float:right;
}

div.gallery.hover
{
    border: 1px solid orange;
}

div.gallery.img
{
    width:110px;
    height: 110px;
}

#TotalSystemPrice
{

}

#container 
    {
        display: table;
        table-layout: fixed;
        width:90%;
        height:100%;
        border: 1px solid black;
        padding: 3px;
    }   

#left, #right
    {
        display: table-cell;
    }

#left
    {
        width: 50%;
        height: 100%;
        background: white;
        border: 1px solid blue;
        margin:3px 2px; 
    }

#right
    {
        width: 50%;
        height: 100%;
        background-color:ivory;
        border: 1px solid blue;
        margin: 3px 2px;
    }

#computerOrders 
    {
        width:50%;
        height:100%;
        background-color:white;
    }

#orderInfo 
    {
        width:50%;
        height:100%;
        background-color:white;
    }

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.