title: Another Order form with radio buttons, but need no taxes, subtotals or quantities,
body: <p>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.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Javascript - Unit 2 Summary&lt;/title&gt;
          &lt;link href="unit2-summary.css" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
  
          &lt;script type="text/javascript"&gt;
          /*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;
          }
  
  
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;form name="ComputerForm"&gt;
          &lt;h1 align="center"&gt;Comupter System Order Form&lt;/h1&gt;
  
      &lt;div id="container" font="courier" size="10"&gt;
          &lt;div id="left"&gt;&lt;div id ="leftWrapper" class="wrapper"&gt;
          &lt;p&gt;&lt;p&gt;&lt;/p&gt;      
      &lt;div class="gallery"&gt;
          &lt;a target="_blank" href="ComputerCase.jpg"&gt;
              &lt;img src="ComputerCase.jpg"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
          &lt;h4&gt;Computer Case Style:&lt;/h4&gt;
              &lt;input name="computerCase" type="radio" onClick="calculateTotal()" /&gt;Desktop Case ($500.00)&lt;br /&gt;
              &lt;input name="computerCase" type="radio" onClick="calculateTotal()" /&gt;Mini-Tower Case ($600.00)&lt;br /&gt;
              &lt;input name="computerCase" type="radio" onClick="calculateTotal()" /&gt;Full Tower Case ($700.00)&lt;br /&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;div class="gallery"&gt;
          &lt;a target="_blank" href="ComputerMonitor.jpg"&gt;          
              &lt;img src="ComputerMonitor.jpg"&gt;
          &lt;/a&gt;
      &lt;/div&gt;  
          &lt;h4&gt;Computer Monitors&lt;/h4&gt;
              &lt;input name="computerMonitor" type="radio" onClick="calculateTotal()" /&gt;17" LCD Flat Screen ($250.00)&lt;br /&gt;
              &lt;input name="computerMonitor" type="radio" onClick="calculateTotal()" /&gt;19" LCD Flat Screen ($300.00)&lt;br /&gt;
              &lt;input name="computerMonitor" type="radio" onClick="calculateTotal()" /&gt;21" LCD Flat Screen ($350.00)&lt;br /&gt;
          &lt;p&gt;&lt;/p&gt;
      &lt;div class="gallery"&gt;   
          &lt;a target="_blank" href="ComputerPrinter.jpg"&gt;
              &lt;img src="ComputerPrinter.jpg"&gt;&lt;/a&gt;
          &lt;/a&gt;
      &lt;/div&gt;  
          &lt;h4&gt;Computer Printers&lt;/h4&gt;
              &lt;input name="computerPrinter" type="radio" onClick="calculateTotal()" /&gt;Inkjet Printer ($100.00)&lt;br /&gt;
              &lt;input name="computerPrinter" type="radio" onClick="calculateTotal()" /&gt;Laser Printer ($250.00)&lt;br /&gt;
              &lt;input name="computerPrinter" type="radio" onClick="calculateTotal()" /&gt;Color Laser Printer ($350.00)&lt;br /&gt;
          &lt;/p&gt;&lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
      &lt;div id="right"&gt;&lt;div id="rightWrapper" class="wrapper"&gt;
              &lt;br&gt;&lt;br&gt;
  
              &lt;p&gt;Total System Price:&amp;nbsp;&amp;nbsp;$
                  &lt;input name="totalSystemPrice" size="14px" type="text" id="totalPrice" class="totalPrice" readonly&gt;
              &lt;/p&gt;
              &lt;br&gt;&lt;br&gt;
          &lt;hr /&gt;
              &lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
                  Name:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name="yourName" size="50" type="text"&gt;&lt;br /&gt;
                  Address:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name="yourAddress" size="50" type="text"&gt;&lt;br /&gt;
                  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                      &lt;input name="yourAddress2" size="50" type="text"&gt;&lt;br /&gt;
                  City, State, Zip:&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name="yourCityStateZip" size="50" type="text"&gt;&lt;br /&gt;
                  Phone Number:&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name="yourPhone" size="50" type="text"&gt;&lt;br /&gt;
                  Email Address:&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input name="yourEmail" size="50" type="text"&gt;&lt;/p&gt;
          &lt;/p&gt;
          &lt;hr /&gt;
              &lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;div align="center"&gt;
                  &lt;input type="button" id="submit" value="Submit Order" onClick="doSubmit()"&gt;
                  &lt;input type="button" id="reset" value="Clear Values" onClick="doClear()"&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/div&gt;&lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS page is so far:</p>
  
  <pre><code>     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;
      }
  </code></pre>