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
- <html>
- <head>
- <title>Getting javascript display value</title>
- <SCRIPT language = JavaScript><!--
- function calculate() {
- A = document.totalform.sizetotal.value
- B = document.totalform.laminatetotal.value
- C = document.totalform.totallaminatesqm.value
- D = document.totalform.floorheattotal.value
- E = document.totalform.totalfloorheatsqm.value
- F = document.totalform.totaldeckextsqm.value
- G = document.totalform.decklighttotal.value
- H = document.totalform.rcdtotal.value
- I = document.totalform.sockettotal.value
- J = document.totalform.lighttotal.value
- K = document.totalform.picwintotal.value
- L = document.totalform.lrgwintotal.value
- M = document.totalform.fhwintotal.value
- N = document.totalform.frdoortotal.value
- A = Number(A)
- B = Number(B)
- C = Number(C)
- D = Number(D)
- E = Number(E)
- F = Number(F)
- G = Number(G)
- H = Number(H)
- I = Number(I)
- J = Number(J)
- K = Number(K)
- L = Number(L)
- M = Number(M)
- N = Number(N)
- O = (A + B + C + D + E + F + G + H + I + J + K + L + M + N)
- document.totalform.grandtotal.value = "£" + O
- }
- function count() {
- var doc = document.totalform;
- var quantity1 = doc.laminateqty.value;
- var price1 = doc.laminatesqmprice.value;
- var total1 = quantity1 * price1;
- doc.totallaminatesqm.value = total1;
- var quantity2 = doc.floorheatqty.value;
- var price2 = doc.floorheatsqmprice.value;
- var total2 = quantity2 * price2;
- doc.totalfloorheatsqm.value = total2;
- var quantity3 = doc.deckextqty.value;
- var price3 = doc.deckextqmprice.value;
- var total3 = quantity3 * price3;
- doc.totaldeckextsqm.value = total3;
- }
- </SCRIPT>
- </head>
- <body>
- <FORM name="totalform">
- <strong>CONFIGURE</strong><br>
- <br>
- <strong>BASIC BUILD<br>
- </strong>Size <select name="size" onClick="this.form.sizetotal.value=this.form.size.value;">
- <option value="0">You must select a size...</option>
- <option value="3999">2m x 2m @ 000.00</option>
- <option value="5999">3m x 3m @ 000.00</option>
- <option value="7999">4m x 3m @ 000.00</option>
- <option value="9999">5m x 4m @ 000.00</option>
- </select>
- <INPUT type="text" value="" name="sizetotal" size="10"><br>
- <br>
- <strong>FLOORING</strong><br>
- Laminate <select name="laminate" onClick="this.form.laminatetotal.value=this.form.laminate.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">2m x 2m flooring +0.00</option>
- <option value="150">3m x 3m flooring +0.00</option>
- <option value="200">4m x 3m flooring +0.00</option>
- <option value="250">5m x 4m flooring +0.00</option>
- </select>
- <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>
- <br>
- Under Floor Heating <select name="floorheat" onClick="this.form.floorheattotal.value=this.form.floorheat.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">2m x 2m flooring +0.00</option>
- <option value="100">3m x 3m flooring +0.00</option>
- <option value="100">4m x 3m flooring +0.00</option>
- <option value="100">5m x 4m flooring +0.00</option>
- </select>
- <INPUT type="text" value="" name="floorheattotal" size="10"><br>
- Under Floor Heating QTY <input name="floorheatqty" onchange="javascript: count();">sq m £ <input name="floorheatsqmprice" value="100" readonly> <input name="totalfloorheatsqm" readonly><br>
- <br>
- <strong>DECKING</strong><br>
- Deck Extension QTY <input name="deckextqty" onchange="javascript: count();">sq m £ <input name="deckextqmprice" value="100" readonly> <input name="totaldeckextsqm" readonly><br>
- Deck Lights <select name="decklights" onClick="this.form.decklighttotal.value=this.form.decklights.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">2x lights +0.00</option>
- <option value="200">4x lights +0.00</option>
- <option value="300">6x lights +0.00</option>
- <option value="400">8x lights +0.00</option>
- <option value="500">10x lights +0.00</option>
- <option value="600">12x lights +0.00</option>
- </select>
- <INPUT type="text" value="" name="decklighttotal" size="10"><br>
- <br>
- <strong>POWER SUPPLY<br>
- </strong>RCD<strong> </strong><select name="rcd2way" onClick="this.form.rcdtotal.value=this.form.rcd2way.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">Not required</option>
- <option value="10">Required +0.00</option>
- </select>
- <INPUT type="text" value="" name="rcdtotal" size="10"><br>
- Sockets <select name="sockets" onClick="this.form.sockettotal.value=this.form.sockets.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">1x double socket +0.00</option>
- <option value="200">2x double socket +0.00</option>
- <option value="300">3x double socket +0.00</option>
- <option value="400">4x double socket +0.00</option>
- <option value="600">5x double socket +0.00</option>
- <option value="700">6x double socket +0.00</option>
- </select>
- <INPUT type="text" value="" name="sockettotal" size="10"><br>
- Lights <select name="lighting" onClick="this.form.lighttotal.value=this.form.lighting.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">2x ceiling spotlights +0.00</option>
- <option value="100">4x ceiling spotlights +0.00</option>
- <option value="100">6x ceiling spotlights +0.00</option>
- <option value="100">8x ceiling spotlights +0.00</option>
- <option value="100">10x ceiling spotlights +0.00</option>
- <option value="100">12x ceiling spotlights +0.00</option>
- <option value="100">14x ceiling spotlights +0.00</option>
- <option value="100">16x ceiling spotlights +0.00</option>
- <option value="100">2x wall lights +0.00</option>
- <option value="100">4x wall lights +0.00</option>
- <option value="100">6x wall lights +0.00</option>
- <option value="100">8x wall lights +0.00</option>
- <option value="100">10x wall lights +0.00</option>
- <option value="100">12x wall lights +0.00</option>
- <option value="100">14x wall lights +0.00</option>
- <option value="100">16x wall lights +0.00</option>
- </select>
- <INPUT type="text" value="" name="lighttotal" size="10"><br>
- <br>
- <strong>WINDOWS</strong><br>
- Picture Window <select name="picturewindow" onClick="this.form.picwintotal.value=this.form.picturewindow.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">1x MAHOGANY effect +0.00</option>
- <option value="100">2x MAHOGANY effect +0.00</option>
- <option value="100">3x MAHOGANY effect +0.00</option>
- <option value="100">4x MAHOGANY effect +0.00</option>
- <option value="100">1x LIGHT OAK effect +0.00</option>
- <option value="100">2x LIGHT OAK effect +0.00</option>
- <option value="100">3x LIGHT OAK effect +0.00</option>
- <option value="100">4x LIGHT OAK effect +0.00</option>
- <option value="100">1x REAL WOOD effect +0.00</option>
- <option value="100">2x REAL WOOD effect +0.00</option>
- <option value="100">3x REAL WOOD effect +0.00</option>
- <option value="100">4x REAL WOOD effect +0.00</option>
- </select>
- <INPUT type="text" value="" name="picwintotal" size="10"><br>
- Large Window <select name="largewindow" onClick="this.form.lrgwintotal.value=this.form.largewindow.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">1x MAHOGANY effect +0.00</option>
- <option value="100">2x MAHOGANY effect +0.00</option>
- <option value="100">1x LIGHT OAK effect +0.00</option>
- <option value="100">2x LIGHT OAK effect +0.00</option>
- <option value="100">1x REAL WOOD effect +0.00</option>
- <option value="100">2x REAL WOOD effect +0.00</option>
- </select>
- <INPUT type="text" value="" name="lrgwintotal" size="10"><br>
- Full Height Window <select name="fullheightwindow" onClick="this.form.fhwintotal.value=this.form.fullheightwindow.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="100">1x MAHOGANY effect +0.00</option>
- <option value="100">2x MAHOGANY effect +0.00</option>
- <option value="100">1x LIGHT OAK effect +0.00</option>
- <option value="100">2x LIGHT OAK effect +0.00</option>
- <option value="100">1x REAL WOOD effect +0.00</option>
- <option value="100">2x REAL WOOD effect +0.00</option>
- </select>
- <INPUT type="text" value="" name="fhwintotal" size="10"><br>
- Doors <select name="frenchdoors" onClick="this.form.frdoortotal.value=this.form.frenchdoors.value;">
- <option selected="selected" value="">Make your selection... </option>
- <option value="0">None</option>
- <option value="0">Standard MAHOGANY effect french doors (inc. in basic build) +0.00</option>
- <option value="0">Standard LIGHT OAK effect french doors (inc. in basic build) +0.00</option>
- <option value="100">Standard REAL WOOD french doors +0.00</option>
- <option value="-100">Single MAHOGANY effect door -0.00</option>
- <option value="-100">Single LIGHT OAK effect door -0.00</option>
- <option value="-100">Single REAL WOOD door -0.00</option>
- <option value="100">MAHOGANY effect french doors with SINGLE L or R side light +0.00</option>
- <option value="100">LIGHT OAK effect french doors with SINGLE L or R side light +0.00</option>
- <option value="100">REAL WOOD french doors with SINGLE L or R side light +0.00</option>
- <option value="100">MAHOGANY effect french doors with BOTH L & R side lights +0.00</option>
- <option value="100">LIGHT OAK effect french doors with BOTH L & R side lights +0.00</option>
- <option value="100">REAL WOOD french doors with BOTH L & R side lights +0.00</option>
- </select>
- <INPUT type="text" value="" name="frdoortotal" size="10"><br>
- <br>
- <INPUT type="button" value="Click for total" onClick= calculate() name="b1"> <INPUT type="text" name="grandtotal" value= "" size="10"><span id="output"></span>
- </form>
- <br>
- <br>
- <form name="form5">
- </form>
- </body>
- </html>