Change number of html form fields based on a form field selection (hide or show form field)

I have this html form.  I'm using javascript to change the 'Select Quantity' field based on the 'Type of Alcohol' field.


When 'Spirits' ('alcohol_type') is selected I want to show:'cost','quantity','percentage',spirits_type','outside_country' fields.

When 'Beer','Spirit Coolers', or 'Wine Coolers' ('alcohol_type') is selected, then I would like to only show:
'cost','quantity','percentage' only and make the others disappear.

When 'Cider,'Sparkling Wine', or 'Wine' is selected I want to only show:
'cost','quantity','percentage', and 'bottled_in'


I have included the html form and the javascript function

This is the code for the 'bottled_in' select statement

            <select name="bottled_in">
                  <option value="">Bottled In?</option>
                  <option value="Canada">Canada</option>
                  <option value="United States">United States</option>
                  <option value="Mexico">Mexico</option>
                  <option value="Australia">Australia</option>
                  <option value="New Zealand">New Zealand</option>
                  <option value="South Africa">South Africa</option>
                  <option value="France">France</option>
                  <option value="Other">Other</option>
            </select>

<form name="duty" action="index.php" method="POST">			  
		<select name="province" onchange="">
			<option value="">Select Province</option>
			<option value="Alberta">Alberta</option>
			<option value="British Columbia">British Columbia</option>
			<option value="Manitoba">Manitoba</option>
			<option value="New Brunswick">New Brunswick</option>
			<option value="Nfld.">Nfld.</option>
			<option value="Nova Scotia">Nova Scotia</option>
			<option value="Ontario">Ontario</option>	
			<option value="P.E.I.">P.E.I.</option>
			<option value="Quebec">Quebec</option>
			<option value="Saskatchewan">Saskatchewan</option>
			<option value="N.W.T.">N.W.T.</option>
			<option value="Nunavut">Nunavut</option>
			<option value="Yukon">Yukon</option>
		</select><br /><br />
				 			 			
        <select name="alcohol_type" size="1"
        onchange="setOptions(document.duty.alcohol_type.options[document.duty.alcohol_type.selectedIndex].value);">
		<option value="">Type Of Alcohol</option>
			<option value="1">Spirits</option>
			<option value="2">Spirit Coolers</option>
			<option value="3">Wine</option>
			<option value="4">Wine Coolers</option>
			<option value="5">Sparkling Wine</option>
			<option value="6">Cider</option>
			<option value="7">Beer</option>	
		</select><br /><br />
		
		Cost $CDN:<br /><input size="10" type="text" name="cost" /><br /><br />
				
		<select id="typeSpirits" name="quantity" size="1">
			<option value=" " selected="selected">Select Quantity</option>
		</select><br /><br />
		
		Alcohol %:<br /> <input size="10" type="text" name="percentage" /><br /><br />
		
		<select name="spirits_type">
			<option value="">Type of Spirits</option>
			<option value="Whisky">Whisky</option>
			<option value="Rum">Rum</option>
			<option value="Vodka">Vodka</option>
			<option value="Tequila">Tequila</option>
			<option value="Gin">Gin</option>
			<option value="Liqueurs">Liqueurs</option>
			<option value="Brandy/Cognac">Brandy/Cognac</option>
			<option value="Other">Other</option>
		</select><br /><br />
				
		<select name="outside_country">
			<option value="">Made Outside Canada, USA, Mexico?</option>
			<option value="No">No</option>
			<option value="Yes">Yes</option>
		</select><br /><br />
					  
		<input id="submitbutton" type="submit" name="submit1" value="Submit" tabindex="3" />     
			  			  
	</form>





function setOptions(chosen)
{
var selbox = document.duty.quantity;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Select Quantity',' ');

}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('375ml (Pint)','375');
selbox.options[selbox.options.length] = new Option('750ml (Fifth)','750');
selbox.options[selbox.options.length] = new Option('1 Liter','1000');
selbox.options[selbox.options.length] = new Option('1.14L (Forty)','1140');
selbox.options[selbox.options.length] = new Option('1.75L (Sixty)','1750');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('4 X 270ml','1080');
selbox.options[selbox.options.length] = new Option('4 X 330ml','1320');
selbox.options[selbox.options.length] = new Option('6 X 330ml','1980');
selbox.options[selbox.options.length] = new Option('12 X 330ml','3960');
selbox.options[selbox.options.length] = new Option('4 X 341ml','1364');
selbox.options[selbox.options.length] = new Option('6 X 341ml','2046');
selbox.options[selbox.options.length] = new Option('6 X 355ml','2130');
selbox.options[selbox.options.length] = new Option('12 X 355ml','4260');
selbox.options[selbox.options.length] = new Option('4 X 400ml','1600');
selbox.options[selbox.options.length] = new Option('12 X 400ml','4800');
selbox.options[selbox.options.length] = new Option('1 X 375ml','375');
selbox.options[selbox.options.length] = new Option('1 X 473ml','473');
selbox.options[selbox.options.length] = new Option('1 X 500ml','500');
selbox.options[selbox.options.length] = new Option('1 X 568ml','568');
selbox.options[selbox.options.length] = new Option('1 X 700ml','700');
selbox.options[selbox.options.length] = new Option('1 X 750ml','750');
selbox.options[selbox.options.length] = new Option('1 Liter','1000');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('6 X 125ml','375');
selbox.options[selbox.options.length] = new Option('187ml','187');
selbox.options[selbox.options.length] = new Option('200ml','200');
selbox.options[selbox.options.length] = new Option('375ml','375');
selbox.options[selbox.options.length] = new Option('500ml','500');
selbox.options[selbox.options.length] = new Option('750ml','750');
selbox.options[selbox.options.length] = new Option('1.5 Liters','1500');
}
if (chosen == "4") {
selbox.options[selbox.options.length] = new Option('4 X 270ml','1080');
selbox.options[selbox.options.length] = new Option('4 X 330ml','1320');
selbox.options[selbox.options.length] = new Option('6 X 330ml','1980');
selbox.options[selbox.options.length] = new Option('12 X 330ml','3960');
selbox.options[selbox.options.length] = new Option('4 X 341ml','1364');
selbox.options[selbox.options.length] = new Option('6 X 341ml','2046');
selbox.options[selbox.options.length] = new Option('6 X 355ml','2130');
selbox.options[selbox.options.length] = new Option('12 X 355ml','4260');
selbox.options[selbox.options.length] = new Option('4 X 400ml','1600');
selbox.options[selbox.options.length] = new Option('12 X 400ml','4800');
selbox.options[selbox.options.length] = new Option('1 X 375ml','375');
selbox.options[selbox.options.length] = new Option('1 X 473ml','473');
selbox.options[selbox.options.length] = new Option('1 X 500ml','500');
selbox.options[selbox.options.length] = new Option('1 X 568ml','568');
selbox.options[selbox.options.length] = new Option('1 X 700ml','700');
selbox.options[selbox.options.length] = new Option('1 X 750ml','750');
selbox.options[selbox.options.length] = new Option('1 Liter','1000');
}
if (chosen == "5") {
selbox.options[selbox.options.length] = new Option('6 X 125ml','375');
selbox.options[selbox.options.length] = new Option('187ml','187');
selbox.options[selbox.options.length] = new Option('200ml','200');
selbox.options[selbox.options.length] = new Option('375ml','375');
selbox.options[selbox.options.length] = new Option('500ml','500');
selbox.options[selbox.options.length] = new Option('750ml','750');
selbox.options[selbox.options.length] = new Option('1.5 Liters','1500');
}
if (chosen == "6") {
selbox.options[selbox.options.length] = new Option('4 X 270ml','1080');
selbox.options[selbox.options.length] = new Option('4 X 330ml','1320');
selbox.options[selbox.options.length] = new Option('6 X 330ml','1980');
selbox.options[selbox.options.length] = new Option('12 X 330ml','3960');
selbox.options[selbox.options.length] = new Option('4 X 341ml','1364');
selbox.options[selbox.options.length] = new Option('6 X 341ml','2046');
selbox.options[selbox.options.length] = new Option('6 X 355ml','2130');
selbox.options[selbox.options.length] = new Option('12 X 355ml','4260');
selbox.options[selbox.options.length] = new Option('4 X 400ml','1600');
selbox.options[selbox.options.length] = new Option('12 X 400ml','4800');
selbox.options[selbox.options.length] = new Option('1 X 375ml','375');
selbox.options[selbox.options.length] = new Option('1 X 473ml','473');
selbox.options[selbox.options.length] = new Option('1 X 500ml','500');
selbox.options[selbox.options.length] = new Option('1 X 568ml','568');
selbox.options[selbox.options.length] = new Option('1 X 700ml','700');
selbox.options[selbox.options.length] = new Option('1 X 750ml','750');
selbox.options[selbox.options.length] = new Option('1 Liter','1000');
}
if (chosen == "7") {
selbox.options[selbox.options.length] = new Option('1 Case Cans','8520');
selbox.options[selbox.options.length] = new Option('1 Case Bottles','8184');
selbox.options[selbox.options.length] = new Option('15 X 355ml','5324');
selbox.options[selbox.options.length] = new Option('15 X 341ml','5115');
selbox.options[selbox.options.length] = new Option('12 X 355ml','4260');
selbox.options[selbox.options.length] = new Option('12 X 341ml','4092');
selbox.options[selbox.options.length] = new Option('6 X 355ml','2130');
selbox.options[selbox.options.length] = new Option('6 X 341ml','2046');
selbox.options[selbox.options.length] = new Option('1 X 500ml','500');
selbox.options[selbox.options.length] = new Option('1 X 473ml','473');
selbox.options[selbox.options.length] = new Option('1 X 375ml','375');
selbox.options[selbox.options.length] = new Option('1 X 330ml','330');
}
}

Open in new window

dmalovichAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
ok I put back your previous code : http://jsfiddle.net/FAxGh/
0
 
leakim971PluritechnicianCommented:
Try this : http://jsfiddle.net/u9D3w/

function setOptions(chosen) {
    var selbox = document.duty.quantity;
    var types = new Array();
    types[0] = ['Select Quantity',' '];
    types[1] = ['375ml (Pint)','375','750ml (Fifth)','750','1 Liter','1000','1.14L (Forty)','1140','1.75L (Sixty)','1750'];
    types[2] = ['4 X 270ml','1080','4 X 330ml','1320','6 X 330ml','1980','12 X 330ml','3960','4 X 341ml','1364','6 X 341ml','2046','6 X 355ml','2130','12 X 355ml','4260','4 X 400ml','1600','12 X 400ml','4800','1 X 375ml','375','1 X 473ml','473','1 X 500ml','500','1 X 568ml','568','1 X 700ml','700','1 X 750ml','750','1 Liter','1000'];
    types[3] = ['6 X 125ml','375','187ml','187','200ml','200','375ml','375','500ml','500','1.5 Liters','1500'];
    types[4] = ['4 X 270ml','1080','4 X 330ml','1320','6 X 330ml','1980','12 X 330ml','3960','4 X 341ml','1364','6 X 341ml','2046','6 X 355ml','2130','12 X 355ml','4260','4 X 400ml','1600','12 X 400ml','4800','1 X 375ml','375','1 X 473ml','473','1 X 500ml','500','1 X 568ml','568','1 X 700ml','700','1 X 750ml','750','1 Liter','1000'];
    types[5] = ['6 X 125ml','375','187ml','187','200ml','200','375ml','375','500ml','500','750ml','750','1.5 Liters','1500'];
    types[6] = ['4 X 270ml','1080','4 X 330ml','1320','6 X 330ml','1980','12 X 330ml','3960','4 X 341ml','1364','6 X 341ml','2046','6 X 355ml','2130','12 X 355ml','4260','4 X 400ml','1600','12 X 400ml','4800','1 X 375ml','375','1 X 473ml','473','1 X 500ml','500','1 X 568ml','568','1 X 700ml','700','1 X 750ml','750','1 Liter','1000'];
    types[7] = ['1 Case Cans','8520','1 Case Bottles','8184','15 X 355ml','5324','15 X 341ml','5115','12 X 355ml','4260','12 X 341ml','4092','6 X 355ml','2130','6 X 341ml','2046','1 X 500ml','500','1 X 473ml','473','1 X 375ml','375','1 X 330ml','330'];

    selbox.options.length = 0;
    for(var i=0;i<types[chosen]/2;i=i+2) {
        selbox.options[selbox.options.length] = new Option(types[chosen][0+i],types[chosen][1+i]);
    }
    
    if(chosen == 1 || chosen == 2) {
        document.getElementsByName("spirits_type")[0].style.display = "block";
        document.getElementsByName("outside_country")[0].style.display = "block";
    }
    else {
        document.getElementsByName("spirits_type")[0].style.display = "none";
        document.getElementsByName("outside_country")[0].style.display = "none";
    }
    if(chosen >= 4 && chosen <= 6) {
        document.getElementsByName("bottled_in")[0].style.display = "block";
    }
    else {
        document.getElementsByName("bottled_in")[0].style.display = "none";        
    }
}

Open in new window

0
 
dmalovichAuthor Commented:
Thanks for responding so quick.  When I try it in your example webpage, the quantity doesn't show?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leakim971PluritechnicianCommented:
replace : for(var i=0;i<types[chosen]/2;i=i+2) {
by : for(var i=0;i<types[chosen].length/2;i=i+2) {
0
 
dmalovichAuthor Commented:
Got it to show the quantity types, but it doesn't show all of the choices. For example, for Spirits, the quantity choices are only 375ml, 750ml, and 1 Liter.  It doesn't show the other choices.
0
 
dmalovichAuthor Commented:
Thanks.....
0
All Courses

From novice to tech pro — start learning today.