disable option in javascript based on selection

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Venturini
    New Member
    • Feb 2009
    • 2
    #1

    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


    Code:
    <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 &amp; R side lights +0.00</option>
				<option value="100">LIGHT OAK effect french doors with BOTH L &amp; R side lights +0.00</option>
				<option value="100">REAL WOOD french doors with BOTH L &amp; 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>
    Last edited by acoder; Feb 7 '09, 11:59 AM. Reason: Added [code] tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      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.

        Comment

        • Venturini
          New Member
          • Feb 2009
          • 2
          #3
          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

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              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:
              Code:
              if (document.getElementById("laminate").checked) {
  // now add value according to size...
}

                Comment

                Previous template Next
                Working...