By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,257 Members | 928 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,257 IT Pros & Developers. It's quick & easy.

disable option in javascript based on selection

P: 2
I am trying to put together a web page where the customer makes choices of products and is then given a total. I am extremely new to Javascript and have managed to get as far as I have from web searches for scripts and html and adapted them.

I need to know the principles of how to disable certain options based on other selections within the form. I have attached my script and html below to help.

For example of a customer selects (BASIC BUILD) Size "3m x 3m @ 000.00" I want all other size option below (under laminate, under floor heating etc) to become disabled and grey out.

And on the other hand if a customer selects Sockets "2x double socket" before selecting RCD then RCD will automatically select "Required +0.00"

Thanks
Venturini


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Getting javascript display value</title>
  4. <SCRIPT language = JavaScript><!--
  5. function calculate() {
  6. A = document.totalform.sizetotal.value
  7. B = document.totalform.laminatetotal.value
  8. C = document.totalform.totallaminatesqm.value
  9. D = document.totalform.floorheattotal.value
  10. E = document.totalform.totalfloorheatsqm.value
  11. F = document.totalform.totaldeckextsqm.value
  12. G = document.totalform.decklighttotal.value
  13. H = document.totalform.rcdtotal.value
  14. I = document.totalform.sockettotal.value
  15. J = document.totalform.lighttotal.value
  16. K = document.totalform.picwintotal.value
  17. L = document.totalform.lrgwintotal.value
  18. M = document.totalform.fhwintotal.value
  19. N = document.totalform.frdoortotal.value
  20.  
  21.  
  22. A = Number(A)
  23. B = Number(B)
  24. C = Number(C)
  25. D = Number(D)
  26. E = Number(E)
  27. F = Number(F)
  28. G = Number(G)
  29. H = Number(H)
  30. I = Number(I)
  31. J = Number(J)
  32. K = Number(K)
  33. L = Number(L)
  34. M = Number(M)
  35. N = Number(N)
  36. O = (A + B + C + D + E + F + G + H + I + J + K + L + M + N)
  37. document.totalform.grandtotal.value = "£" + O
  38. }
  39. function count() {
  40. var doc = document.totalform;
  41. var quantity1 = doc.laminateqty.value; 
  42. var price1 = doc.laminatesqmprice.value;
  43. var total1 = quantity1 * price1;
  44. doc.totallaminatesqm.value = total1;
  45. var quantity2 = doc.floorheatqty.value; 
  46. var price2 = doc.floorheatsqmprice.value;
  47. var total2 = quantity2 * price2;
  48. doc.totalfloorheatsqm.value = total2;
  49. var quantity3 = doc.deckextqty.value; 
  50. var price3 = doc.deckextqmprice.value;
  51. var total3 = quantity3 * price3;
  52. doc.totaldeckextsqm.value = total3;
  53. }
  54. </SCRIPT>
  55.  
  56. </head>
  57. <body>
  58.  
  59.  
  60. <FORM name="totalform">
  61.             <strong>CONFIGURE</strong><br>
  62.             <br>
  63.             <strong>BASIC BUILD<br>
  64.             </strong>Size <select name="size" onClick="this.form.sizetotal.value=this.form.size.value;">
  65.                 <option value="0">You must select a size...</option>
  66.                 <option value="3999">2m x 2m @ 000.00</option>
  67.                 <option value="5999">3m x 3m @ 000.00</option>
  68.                 <option value="7999">4m x 3m @ 000.00</option>
  69.                 <option value="9999">5m x 4m @ 000.00</option>
  70.             </select>
  71. <INPUT type="text" value="" name="sizetotal" size="10"><br>
  72.             <br>
  73.             <strong>FLOORING</strong><br>
  74.             Laminate <select name="laminate" onClick="this.form.laminatetotal.value=this.form.laminate.value;">
  75.                 <option selected="selected" value="">Make your selection...                                                          </option>
  76.                 <option value="0">None</option>
  77.                 <option value="100">2m x 2m flooring +0.00</option>
  78.                 <option value="150">3m x 3m flooring +0.00</option>
  79.                 <option value="200">4m x 3m flooring +0.00</option>
  80.                 <option value="250">5m x 4m flooring +0.00</option>
  81.             </select>
  82. <INPUT type="text" value="" name="laminatetotal" size="10"><br>Laminate QTY <input name="laminateqty" onchange="javascript: count();">sq m £ <input name="laminatesqmprice" value="100" readonly>     <input name="totallaminatesqm" readonly><br>
  83.             <br>
  84.             Under Floor Heating <select name="floorheat" onClick="this.form.floorheattotal.value=this.form.floorheat.value;">
  85.  
  86.                 <option selected="selected" value="">Make your selection...                                                          </option>
  87.                 <option value="0">None</option>
  88.                 <option value="100">2m x 2m flooring +0.00</option>
  89.                 <option value="100">3m x 3m flooring +0.00</option>
  90.                 <option value="100">4m x 3m flooring +0.00</option>
  91.                 <option value="100">5m x 4m flooring +0.00</option>
  92.             </select>
  93. <INPUT type="text" value="" name="floorheattotal" size="10"><br>
  94.              Under Floor Heating QTY <input name="floorheatqty" onchange="javascript: count();">sq m £ <input name="floorheatsqmprice" value="100" readonly>     <input name="totalfloorheatsqm" readonly><br>
  95.             <br>
  96.             <strong>DECKING</strong><br>
  97.  
  98.              Deck Extension QTY <input name="deckextqty" onchange="javascript: count();">sq m £ <input name="deckextqmprice" value="100" readonly>     <input name="totaldeckextsqm" readonly><br>
  99.             Deck Lights <select name="decklights" onClick="this.form.decklighttotal.value=this.form.decklights.value;">
  100.                 <option selected="selected" value="">Make your selection...                                                          </option>
  101.                 <option value="0">None</option>
  102.                 <option value="100">2x lights +0.00</option>
  103.                 <option value="200">4x lights +0.00</option>
  104.                 <option value="300">6x lights +0.00</option>
  105.                 <option value="400">8x lights +0.00</option>
  106.                 <option value="500">10x lights +0.00</option>
  107.                 <option value="600">12x lights +0.00</option>
  108.             </select>
  109. <INPUT type="text" value="" name="decklighttotal" size="10"><br>
  110.             <br>
  111.             <strong>POWER SUPPLY<br>
  112.             </strong>RCD<strong> </strong><select name="rcd2way" onClick="this.form.rcdtotal.value=this.form.rcd2way.value;">
  113.                 <option selected="selected" value="">Make your selection...                                                          </option>
  114.                 <option value="0">Not required</option>
  115.                 <option value="10">Required +0.00</option>
  116.             </select>
  117. <INPUT type="text" value="" name="rcdtotal" size="10"><br>
  118.             Sockets <select name="sockets" onClick="this.form.sockettotal.value=this.form.sockets.value;">
  119.                 <option selected="selected" value="">Make your selection...                                                          </option>
  120.                 <option value="0">None</option>
  121.                 <option value="100">1x double socket +0.00</option>
  122.                 <option value="200">2x double socket +0.00</option>
  123.                 <option value="300">3x double socket +0.00</option>
  124.                 <option value="400">4x double socket +0.00</option>
  125.                 <option value="600">5x double socket +0.00</option>
  126.                 <option value="700">6x double socket +0.00</option>
  127.             </select>
  128. <INPUT type="text" value="" name="sockettotal" size="10"><br>
  129.             Lights <select name="lighting" onClick="this.form.lighttotal.value=this.form.lighting.value;">
  130.                 <option selected="selected" value="">Make your selection...                                                          </option>
  131.                 <option value="0">None</option>
  132.                 <option value="100">2x ceiling spotlights +0.00</option>
  133.                 <option value="100">4x ceiling spotlights +0.00</option>
  134.                 <option value="100">6x ceiling spotlights +0.00</option>
  135.                 <option value="100">8x ceiling spotlights +0.00</option>
  136.                 <option value="100">10x ceiling spotlights +0.00</option>
  137.                 <option value="100">12x ceiling spotlights +0.00</option>
  138.                 <option value="100">14x ceiling spotlights +0.00</option>
  139.                 <option value="100">16x ceiling spotlights +0.00</option>
  140.                 <option value="100">2x wall lights +0.00</option>
  141.                 <option value="100">4x wall lights +0.00</option>
  142.                 <option value="100">6x wall lights +0.00</option>
  143.                 <option value="100">8x wall lights +0.00</option>
  144.                 <option value="100">10x wall lights +0.00</option>
  145.                 <option value="100">12x wall lights +0.00</option>
  146.                 <option value="100">14x wall lights +0.00</option>
  147.                 <option value="100">16x wall lights +0.00</option>
  148.             </select>
  149. <INPUT type="text" value="" name="lighttotal" size="10"><br>
  150.             <br>
  151.             <strong>WINDOWS</strong><br>
  152.             Picture Window <select name="picturewindow" onClick="this.form.picwintotal.value=this.form.picturewindow.value;">
  153.                 <option selected="selected" value="">Make your selection...                                                          </option>
  154.                 <option value="0">None</option>
  155.                 <option value="100">1x MAHOGANY effect +0.00</option>
  156.                 <option value="100">2x MAHOGANY effect +0.00</option>
  157.                 <option value="100">3x MAHOGANY effect +0.00</option>
  158.                 <option value="100">4x MAHOGANY effect +0.00</option>
  159.                 <option value="100">1x LIGHT OAK effect +0.00</option>
  160.                 <option value="100">2x LIGHT OAK effect +0.00</option>
  161.                 <option value="100">3x LIGHT OAK effect +0.00</option>
  162.                 <option value="100">4x LIGHT OAK effect +0.00</option>
  163.                 <option value="100">1x REAL WOOD effect +0.00</option>
  164.                 <option value="100">2x REAL WOOD effect +0.00</option>
  165.                 <option value="100">3x REAL WOOD effect +0.00</option>
  166.                 <option value="100">4x REAL WOOD effect +0.00</option>
  167.             </select>
  168. <INPUT type="text" value="" name="picwintotal" size="10"><br>
  169.             Large Window <select name="largewindow" onClick="this.form.lrgwintotal.value=this.form.largewindow.value;">
  170.                 <option selected="selected" value="">Make your selection...                                                          </option>
  171.                 <option value="0">None</option>
  172.                 <option value="100">1x MAHOGANY effect +0.00</option>
  173.                 <option value="100">2x MAHOGANY effect +0.00</option>
  174.                 <option value="100">1x LIGHT OAK effect +0.00</option>
  175.                 <option value="100">2x LIGHT OAK effect +0.00</option>
  176.                 <option value="100">1x REAL WOOD effect +0.00</option>
  177.                 <option value="100">2x REAL WOOD effect +0.00</option>
  178.             </select>
  179. <INPUT type="text" value="" name="lrgwintotal" size="10"><br>
  180.             Full Height Window <select name="fullheightwindow" onClick="this.form.fhwintotal.value=this.form.fullheightwindow.value;">
  181.                 <option selected="selected" value="">Make your selection...                                                          </option>
  182.                 <option value="0">None</option>
  183.                 <option value="100">1x MAHOGANY effect +0.00</option>
  184.                 <option value="100">2x MAHOGANY effect +0.00</option>
  185.                 <option value="100">1x LIGHT OAK effect +0.00</option>
  186.                 <option value="100">2x LIGHT OAK effect +0.00</option>
  187.                 <option value="100">1x REAL WOOD effect +0.00</option>
  188.                 <option value="100">2x REAL WOOD effect +0.00</option>
  189.             </select>
  190. <INPUT type="text" value="" name="fhwintotal" size="10"><br>
  191.             Doors <select name="frenchdoors" onClick="this.form.frdoortotal.value=this.form.frenchdoors.value;">
  192.                 <option selected="selected" value="">Make your selection...                                                          </option>
  193.                 <option value="0">None</option>
  194.                 <option value="0">Standard MAHOGANY effect french doors (inc. in basic build) +0.00</option>
  195.                 <option value="0">Standard LIGHT OAK effect french doors (inc. in basic build) +0.00</option>
  196.                 <option value="100">Standard REAL WOOD french doors +0.00</option>
  197.                 <option value="-100">Single MAHOGANY effect door -0.00</option>
  198.                 <option value="-100">Single LIGHT OAK effect door -0.00</option>
  199.                 <option value="-100">Single REAL WOOD door -0.00</option>
  200.                 <option value="100">MAHOGANY effect french doors with SINGLE L or R side light +0.00</option>
  201.                 <option value="100">LIGHT OAK effect french doors with SINGLE L or R side light +0.00</option>
  202.                 <option value="100">REAL WOOD french doors with SINGLE L or R side light +0.00</option>
  203.                 <option value="100">MAHOGANY effect french doors with BOTH L &amp; R side lights +0.00</option>
  204.                 <option value="100">LIGHT OAK effect french doors with BOTH L &amp; R side lights +0.00</option>
  205.                 <option value="100">REAL WOOD french doors with BOTH L &amp; R side lights +0.00</option>
  206.             </select>
  207. <INPUT type="text" value="" name="frdoortotal" size="10"><br>
  208.             <br>
  209.             <INPUT type="button" value="Click for total" onClick= calculate() name="b1"> <INPUT type="text" name="grandtotal"  value= "" size="10"><span id="output"></span>
  210.         </form>
  211.         <br>
  212.         <br>
  213.         <form name="form5">
  214.  
  215.         </form>
  216.     </body>
  217. </html>
Feb 6 '09 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Perhaps it would make more sense to remove the options completely or not have the options at all, e.g. use a checkbox. You can work out the prices in the function.
Feb 7 '09 #2

P: 2
What do you mean by that exactly. As I said I am very new to this (started using Javascript last week) and haven't even grasped using online scripts unless they have HTML to go with it.

Venturini
Feb 7 '09 #3

acoder
Expert Mod 15k+
P: 16,027
I mean replacing "laminate" and "floorheat" with checkboxes. If they're not checked, then it means "None". If they are checked, then the price depends on the size selection which you already know from the size drop-down. To work out the price, just add the value depending on the selected size, e.g. if you have laminate at size 2x2, then the value to add would be 100, 3x3 150 and so on. Under floor heating would be trivial: 100 if checked, 0 if not.

To check if a checbox is checked:
Expand|Select|Wrap|Line Numbers
  1. if (document.getElementById("laminate").checked) {
  2.   // now add value according to size...
  3. }
Feb 7 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.