473,287 Members | 1,581 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,287 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"

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
3 3212
acoder
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.

Venturini
Feb 7 '09 #3
acoder
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

30
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...
12
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>
1
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() {...
3
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...
1
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...
10
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" ...
2
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...
2
by: ggk517 | last post by:
I have a script like below: ------------------------------------------------------------------------------------------------------------------------ <html> <head> <title>TEST</title> <script...
1
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...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

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.