javascript help

  • musty202
  • Born
  • Born
  • musty202
  • Posts: 3

Post 3+ Months Ago

Hi, i am giving this task to create a javascript page, i need a javascript that will calculate and generate a simple Quotation with total price of item selected and its quantity in a new page and in tabular form, i need this for the following and the price...
This is how far i can go
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function EstimateCalc() {
 alert('Estimate calculation to be added here');
 return false; 
}
</script>
<style type="text/css">
<!--
.style1 {
    color: #00FF00;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 36px;
}
-->
</style>
</head>

<body>
<form name="myForm" action="" method="post" onsubmit="return EstimateCalc()">
 <div align="center">
  <table width="669" border="0" cellpadding="0" cellspacing="0">
   <!--DWLayoutTable-->
   <tr>
    <td width="11" height="41">&nbsp;</td>
   <td width="173">&nbsp;</td>
   <td colspan="4" valign="top"><span class="style1">Price Quotation </span></td>
   <td width="10">&nbsp;</td>
   <td width="65">&nbsp;</td>
   <td width="42">&nbsp;</td>
   <td width="44">&nbsp;</td>
  </tr>
   <tr>
    <td height="15"></td>
   <td></td>
   <td width="73"></td>
   <td width="59"></td>
   <td width="64"></td>
   <td width="128"></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="19"></td>
   <td colspan="2" valign="top"><div align="center">Product and Brands </div></td>
   <td></td>
   <td valign="top"><div align="center">Quantity</div></td>
   <td></td>
   <td></td>
   <td colspan="2" valign="top"><div align="center">Amount Each </div></td>
   <td></td>
  </tr>
   <tr>
    <td height="13"></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="19"></td>
   <td colspan="8" valign="top" bgcolor="#CCCCCC">Nescafe Product </td>
   <td></td>
  </tr>
   <tr>
    <td height="22"></td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   
   
   
   
   <tr>
    <td height="22">&nbsp;</td>
   <td colspan="2" valign="top"><label>
    <div align="left">
     <input type="checkbox" name="checkbox" value="Nescafe Original" />
     Nescafe Original</div>
   </label></td>
  <td>&nbsp;</td>
   <td valign="top"><label>
    <select id="itemCntNescafeOriginal" name="select" size="1">
     <option value="1" selected="selected">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="10">10</option>
     </select>
    </label></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td colspan="2" valign="top"><div align="center">$ 300.00 </div></td>
   <td>&nbsp;</td>
  </tr>
   <tr>
    <td height="31">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
   <tr>
    <td height="19"></td>
   <td colspan="2" rowspan="2" valign="top"><label>
    <div align="left">
     <input type="checkbox" name="checkbox2" value="checkbox" />
     Nescafe Espresso   </div>
   </label></td>
   <td></td>
   <td rowspan="2" valign="top"><label>
    <select id="itemNescafeEspresso" name="select" size="1">
     <option value="1" selected="selected">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="10">10</option>
     </select>
    </label></td>
   <td></td>
   <td></td>
   <td colspan="2" valign="top"><div align="center">$ 299.99 </div></td>
   <td></td>
  </tr>
   <tr>
    <td height="3"></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="30"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="19"></td>
   <td colspan="8" valign="top" bgcolor="#CCCCCC"><div align="left">MILO Product </div></td>
   <td></td>
  </tr>
   <tr>
    <td height="29"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="23"></td>
   <td colspan="2" valign="top"><label>
    <div align="left">
     <input name="radiobutton" type="radio" value="The original Milo" />
     The original Milo </div>
   </label></td>
   <td></td>
   <td valign="top"> <select id="itemTheoriginalMilo" name="select" size="1">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="10">10</option>
    </select></td>
   <td></td>
   <td></td>
   <td colspan="2" valign="top"><div align="center">$ 289.99 </div></td>
   <td></td>
  </tr>
   <tr>
    <td height="26"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
   <tr>
    <td height="22"></td>
   <td colspan="2" valign="top"><label>
    <div align="left">
     <input name="radiobutton" type="radio" value="radiobutton" />
     Milo Fuze   </div>
   </label></td>
   <td></td>
   <td valign="top"><select id="itemMiloFuze" name="select" size="1">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="10">10</option>
    </select></td>
   <td>&nbsp;</td>
   <td></td>
   <td colspan="2" valign="top"><div align="center">$ 339.99 </div></td>
   <td></td>
  </tr>
   <tr>
    <td height="46"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
  </tr>
   <tr>
    <td height="24"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td valign="top"><label>
    <input type="submit" name="Submit" value="Estimate" />
    </label></td>
   <td>&nbsp;</td>
   <td></td>
  </tr>
   <tr>
    <td height="112"></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td></td>
  </tr>
  </table>
 </div>
</form>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http:///1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript">
  7. function EstimateCalc() {
  8.  alert('Estimate calculation to be added here');
  9.  return false; 
  10. }
  11. </script>
  12. <style type="text/css">
  13. <!--
  14. .style1 {
  15.     color: #00FF00;
  16.     font-family: Geneva, Arial, Helvetica, sans-serif;
  17.     font-size: 36px;
  18. }
  19. -->
  20. </style>
  21. </head>
  22. <body>
  23. <form name="myForm" action="" method="post" onsubmit="return EstimateCalc()">
  24.  <div align="center">
  25.   <table width="669" border="0" cellpadding="0" cellspacing="0">
  26.    <!--DWLayoutTable-->
  27.    <tr>
  28.     <td width="11" height="41">&nbsp;</td>
  29.    <td width="173">&nbsp;</td>
  30.    <td colspan="4" valign="top"><span class="style1">Price Quotation </span></td>
  31.    <td width="10">&nbsp;</td>
  32.    <td width="65">&nbsp;</td>
  33.    <td width="42">&nbsp;</td>
  34.    <td width="44">&nbsp;</td>
  35.   </tr>
  36.    <tr>
  37.     <td height="15"></td>
  38.    <td></td>
  39.    <td width="73"></td>
  40.    <td width="59"></td>
  41.    <td width="64"></td>
  42.    <td width="128"></td>
  43.    <td></td>
  44.    <td></td>
  45.    <td></td>
  46.    <td></td>
  47.   </tr>
  48.    <tr>
  49.     <td height="19"></td>
  50.    <td colspan="2" valign="top"><div align="center">Product and Brands </div></td>
  51.    <td></td>
  52.    <td valign="top"><div align="center">Quantity</div></td>
  53.    <td></td>
  54.    <td></td>
  55.    <td colspan="2" valign="top"><div align="center">Amount Each </div></td>
  56.    <td></td>
  57.   </tr>
  58.    <tr>
  59.     <td height="13"></td>
  60.    <td></td>
  61.    <td></td>
  62.    <td></td>
  63.    <td></td>
  64.    <td></td>
  65.    <td></td>
  66.    <td></td>
  67.    <td></td>
  68.    <td></td>
  69.   </tr>
  70.    <tr>
  71.     <td height="19"></td>
  72.    <td colspan="8" valign="top" bgcolor="#CCCCCC">Nescafe Product </td>
  73.    <td></td>
  74.   </tr>
  75.    <tr>
  76.     <td height="22"></td>
  77.    <td>&nbsp;</td>
  78.    <td></td>
  79.    <td></td>
  80.    <td></td>
  81.    <td></td>
  82.    <td></td>
  83.    <td></td>
  84.    <td></td>
  85.    <td></td>
  86.   </tr>
  87.    
  88.    
  89.    
  90.    
  91.    <tr>
  92.     <td height="22">&nbsp;</td>
  93.    <td colspan="2" valign="top"><label>
  94.     <div align="left">
  95.      <input type="checkbox" name="checkbox" value="Nescafe Original" />
  96.      Nescafe Original</div>
  97.    </label></td>
  98.   <td>&nbsp;</td>
  99.    <td valign="top"><label>
  100.     <select id="itemCntNescafeOriginal" name="select" size="1">
  101.      <option value="1" selected="selected">1</option>
  102.      <option value="2">2</option>
  103.      <option value="3">3</option>
  104.      <option value="4">4</option>
  105.      <option value="10">10</option>
  106.      </select>
  107.     </label></td>
  108.    <td>&nbsp;</td>
  109.    <td>&nbsp;</td>
  110.    <td colspan="2" valign="top"><div align="center">$ 300.00 </div></td>
  111.    <td>&nbsp;</td>
  112.   </tr>
  113.    <tr>
  114.     <td height="31">&nbsp;</td>
  115.    <td>&nbsp;</td>
  116.    <td>&nbsp;</td>
  117.    <td>&nbsp;</td>
  118.    <td>&nbsp;</td>
  119.    <td>&nbsp;</td>
  120.    <td>&nbsp;</td>
  121.    <td>&nbsp;</td>
  122.    <td>&nbsp;</td>
  123.    <td>&nbsp;</td>
  124.   </tr>
  125.    <tr>
  126.     <td height="19"></td>
  127.    <td colspan="2" rowspan="2" valign="top"><label>
  128.     <div align="left">
  129.      <input type="checkbox" name="checkbox2" value="checkbox" />
  130.      Nescafe Espresso   </div>
  131.    </label></td>
  132.    <td></td>
  133.    <td rowspan="2" valign="top"><label>
  134.     <select id="itemNescafeEspresso" name="select" size="1">
  135.      <option value="1" selected="selected">1</option>
  136.      <option value="2">2</option>
  137.      <option value="3">3</option>
  138.      <option value="4">4</option>
  139.      <option value="10">10</option>
  140.      </select>
  141.     </label></td>
  142.    <td></td>
  143.    <td></td>
  144.    <td colspan="2" valign="top"><div align="center">$ 299.99 </div></td>
  145.    <td></td>
  146.   </tr>
  147.    <tr>
  148.     <td height="3"></td>
  149.    <td></td>
  150.    <td></td>
  151.    <td></td>
  152.    <td></td>
  153.    <td></td>
  154.    <td></td>
  155.   </tr>
  156.    <tr>
  157.     <td height="30"></td>
  158.    <td>&nbsp;</td>
  159.    <td>&nbsp;</td>
  160.    <td></td>
  161.    <td></td>
  162.    <td></td>
  163.    <td></td>
  164.    <td></td>
  165.    <td></td>
  166.    <td></td>
  167.   </tr>
  168.    <tr>
  169.     <td height="19"></td>
  170.    <td colspan="8" valign="top" bgcolor="#CCCCCC"><div align="left">MILO Product </div></td>
  171.    <td></td>
  172.   </tr>
  173.    <tr>
  174.     <td height="29"></td>
  175.    <td>&nbsp;</td>
  176.    <td>&nbsp;</td>
  177.    <td></td>
  178.    <td></td>
  179.    <td></td>
  180.    <td></td>
  181.    <td></td>
  182.    <td></td>
  183.    <td></td>
  184.   </tr>
  185.    <tr>
  186.     <td height="23"></td>
  187.    <td colspan="2" valign="top"><label>
  188.     <div align="left">
  189.      <input name="radiobutton" type="radio" value="The original Milo" />
  190.      The original Milo </div>
  191.    </label></td>
  192.    <td></td>
  193.    <td valign="top"> <select id="itemTheoriginalMilo" name="select" size="1">
  194.     <option value="1" selected="selected">1</option>
  195.     <option value="2">2</option>
  196.     <option value="3">3</option>
  197.     <option value="4">4</option>
  198.     <option value="10">10</option>
  199.     </select></td>
  200.    <td></td>
  201.    <td></td>
  202.    <td colspan="2" valign="top"><div align="center">$ 289.99 </div></td>
  203.    <td></td>
  204.   </tr>
  205.    <tr>
  206.     <td height="26"></td>
  207.    <td>&nbsp;</td>
  208.    <td>&nbsp;</td>
  209.    <td></td>
  210.    <td></td>
  211.    <td></td>
  212.    <td></td>
  213.    <td></td>
  214.    <td></td>
  215.    <td></td>
  216.   </tr>
  217.    <tr>
  218.     <td height="22"></td>
  219.    <td colspan="2" valign="top"><label>
  220.     <div align="left">
  221.      <input name="radiobutton" type="radio" value="radiobutton" />
  222.      Milo Fuze   </div>
  223.    </label></td>
  224.    <td></td>
  225.    <td valign="top"><select id="itemMiloFuze" name="select" size="1">
  226.     <option value="1" selected="selected">1</option>
  227.     <option value="2">2</option>
  228.     <option value="3">3</option>
  229.     <option value="4">4</option>
  230.     <option value="10">10</option>
  231.     </select></td>
  232.    <td>&nbsp;</td>
  233.    <td></td>
  234.    <td colspan="2" valign="top"><div align="center">$ 339.99 </div></td>
  235.    <td></td>
  236.   </tr>
  237.    <tr>
  238.     <td height="46"></td>
  239.    <td>&nbsp;</td>
  240.    <td>&nbsp;</td>
  241.    <td></td>
  242.    <td></td>
  243.    <td></td>
  244.    <td></td>
  245.    <td>&nbsp;</td>
  246.    <td>&nbsp;</td>
  247.    <td></td>
  248.   </tr>
  249.    <tr>
  250.     <td height="24"></td>
  251.    <td>&nbsp;</td>
  252.    <td>&nbsp;</td>
  253.    <td></td>
  254.    <td></td>
  255.    <td></td>
  256.    <td></td>
  257.    <td valign="top"><label>
  258.     <input type="submit" name="Submit" value="Estimate" />
  259.     </label></td>
  260.    <td>&nbsp;</td>
  261.    <td></td>
  262.   </tr>
  263.    <tr>
  264.     <td height="112"></td>
  265.    <td>&nbsp;</td>
  266.    <td>&nbsp;</td>
  267.    <td></td>
  268.    <td></td>
  269.    <td></td>
  270.    <td></td>
  271.    <td>&nbsp;</td>
  272.    <td>&nbsp;</td>
  273.    <td></td>
  274.   </tr>
  275.   </table>
  276.  </div>
  277. </form>
  278. </body>
  279. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Posts: 214
  • Loc: Sweden

Post 3+ Months Ago

I'm not good at javascript but here is some code that might do what you want at least partially:
Code: [ Select ]
<script type="text/javascript">
function EstimateCalc() {
var results = 0;
var values = document.getElementById("itemCntNescafeOriginal");
var count = values.length;
var checkBox = document.getElementsByName("checkbox");

//checks if Nescafe Original is checked and quantity then multiplies by 300
if (checkBox[0].checked) {
    for(var n = 0; n < count; n++) {
        if (values.options[n].selected) {
            results += parseInt(values.options[n].value) * 300;
}
}
}

var values = document.getElementById("itemNescafeEspresso");
var count = values.length;
var checkBox = document.getElementsByName("checkbox2");


if (checkBox[0].checked) {
    for(var n = 0; n < count; n++) {
        if (values.options[n].selected) {
            results += parseInt(values.options[n].value) * 299.99;
}
}
}

var values = document.getElementById("itemTheoriginalMilo");
var count = values.length;
var radioBox = document.getElementsByName("radiobutton");

if (radioBox[0].checked) {
    for(var n = 0; n < count; n++) {
        if (values.options[n].selected) {
            results += parseInt(values.options[n].value) * 289.99;
}
}
}
else if (radioBox[1].checked) {
var values = document.getElementById("itemMiloFuze");
var count = values.length;
    for(var n = 0; n < count; n++) {
        if (values.options[n].selected) {
            results += parseInt(values.options[n].value) * 339.99;
}
}
}
alert(results + " $");
}
</script>
  1. <script type="text/javascript">
  2. function EstimateCalc() {
  3. var results = 0;
  4. var values = document.getElementById("itemCntNescafeOriginal");
  5. var count = values.length;
  6. var checkBox = document.getElementsByName("checkbox");
  7. //checks if Nescafe Original is checked and quantity then multiplies by 300
  8. if (checkBox[0].checked) {
  9.     for(var n = 0; n < count; n++) {
  10.         if (values.options[n].selected) {
  11.             results += parseInt(values.options[n].value) * 300;
  12. }
  13. }
  14. }
  15. var values = document.getElementById("itemNescafeEspresso");
  16. var count = values.length;
  17. var checkBox = document.getElementsByName("checkbox2");
  18. if (checkBox[0].checked) {
  19.     for(var n = 0; n < count; n++) {
  20.         if (values.options[n].selected) {
  21.             results += parseInt(values.options[n].value) * 299.99;
  22. }
  23. }
  24. }
  25. var values = document.getElementById("itemTheoriginalMilo");
  26. var count = values.length;
  27. var radioBox = document.getElementsByName("radiobutton");
  28. if (radioBox[0].checked) {
  29.     for(var n = 0; n < count; n++) {
  30.         if (values.options[n].selected) {
  31.             results += parseInt(values.options[n].value) * 289.99;
  32. }
  33. }
  34. }
  35. else if (radioBox[1].checked) {
  36. var values = document.getElementById("itemMiloFuze");
  37. var count = values.length;
  38.     for(var n = 0; n < count; n++) {
  39.         if (values.options[n].selected) {
  40.             results += parseInt(values.options[n].value) * 339.99;
  41. }
  42. }
  43. }
  44. alert(results + " $");
  45. }
  46. </script>


Its not fancy and its just a bunch of duplications all over the place (since I have yet to grasp how to browse with nodes). It will present a calculation based on what the user selected and present the result as a popup. :D

The "Amount Each" Values are NOT collected but rather hard coded in there. Witch is probably not a good thing.

hm.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 165 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.