473,382 Members | 1,313 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

disable option in javascript based on selection

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"


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
  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>
  56. </head>
  57. <body>
  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;">
  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>
  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">
  215.         </form>
  216.     </body>
  217. </html>
Feb 6 '09 #1
3 3217
16,027 Expert Mod 8TB
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
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.

Feb 7 '09 #3
16,027 Expert Mod 8TB
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

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

Similar topics

by: Blnukem | last post by:
Hi All I'm new to javascript and was wondering if someone can help me with this I want to disable my second and third drop-box if the first one is selected to "Closed" I think I'm close but just...
by: Forti2ude | last post by:
Hello, I have a simple form... <form> <select name="foo" multiple> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </select>
by: Fluffy Convict | last post by:
Does anybody know how to disable only certain options of an option list by a javascript function? With the following function you can disable a option list completely: function disableList() {...
by: veganeater | last post by:
Hi, I'm wondering if there's a way that I can select which <div> to show based on the user's selection from a dropdown/listbox form. <form name="form1" method="post" action=""> <select...
by: hortoristic | last post by:
We are using JavaScript to Enable/Disable certain fields on web pages based on business rules. A simple example is if when using an option type tag, and the two options are Yes and No. If YES...
by: Geoff | last post by:
Is there any way to change the enabled property of a dropdownlist without a postback, depending on the selection in another dropdownlist? Select Case ddlReport.SelectedValue Case "Profit" ...
by: bigrich | last post by:
I'm a beginner to javascript and need help. I've searched the forum but can't piece the answer together. I need to be able to uncheck and disable a checkbox based on the option selected in a...
by: ggk517 | last post by:
I have a script like below: ------------------------------------------------------------------------------------------------------------------------ <html> <head> <title>TEST</title> <script...
by: secndChildhood | last post by:
I hope someone can help with this problem: I have a perl cgi form that has a popup_list. Based on a value that is coming in from a database query, I want to either 1) display the value (from...
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.