asked on

Disable a select box if another select is used

I have a form where the user can select the size and colour of a t-shirt.
There are four different select boxes:
1. Men's sizes:<select name="item_options[m_size]">
2. men's colours: <select name="item_options[m_colour]"
3. Women's sizes: <select name="item_options[f_size]"
4. Women's colours: <select name="item_options[f_colour]"

The customer can only either add men's or women's t-shirts to the order so I would like to have the select options working that if a man's size t-shirt is chosen the women's sizes are disabled or revert back to a blank value and vice versa.

Thanks

Gurvinder Pal Singh

then if the user wants to change his mind and buy another gender's cloth, then how will you allow to change it back?

Shouldn't there be a radio button which will segregate and toggle between select boxes for male and female?

Frosty555

I'm not sure exactly what you want the behavior to be, but you can use javascript to disable or enable the select boxes, once you've assigned IDs to each select box.

document.getElementById("idofselectbox").disabled = true;
document.getElementById("idofselectbox").disabled = false;

You can hook into the onchange() event of the select boxes and change the enabled/disabled state of the others depending on what value has been picked, or have a couple radio buttons which enable/disable the appropriate set of select boxes.

Gurvinder Pal Singh

i was talking about something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script>
		function toggleSelects( thisObj )
		{
			if ( thisObj.id=="male")
			{
				document.getElementById("msize").removeAttribute("disabled");
				document.getElementById("mcolor").removeAttribute("disabled");
				document.getElementById("fsize").setAttribute("disabled","true");
				document.getElementById("fcolor").setAttribute("disabled","true");
			}
			else if ( thisObj.id=="female")
			{
				document.getElementById("fsize").removeAttribute("disabled");
				document.getElementById("fcolor").removeAttribute("disabled");
				document.getElementById("msize").setAttribute("disabled","disabled");
				document.getElementById("mcolor").setAttribute("disabled","disabled");
			}
		}
	</script>
</HEAD>

<BODY>
	<form>
		<input type="radio" id="male" name="gender" onclick="toggleSelects(this)">
		For Male
		<select name="msize" id="msize" disabled>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="mcolor" id="mcolor" disabled>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
		<br>
		<input type="radio" id="female" name="gender" onclick="toggleSelects(this)">	
		For FeMale
		<select name="fsize" id="fsize" disabled>
			<option value="1">size1</option>
			<option value="2">size2</option>
			<option value="3">size3</option>
			<option value="4">size4</option>
		</select>
		<select name="fcolor" id="fcolor" disabled>
			<option value="1">color1</option>
			<option value="2">color2</option>
			<option value="3">color3</option>
			<option value="4">color4</option>
		</select>
	</form>
</BODY>
</HTML>

Open in new window

PlanAndSimple

ASKER

To explain further - I would like to make it impossible for someone to select sizes from both the male and female select dropdowns.

If it was possible I would like the male size select box to default back to the '<option value="">select size</option>' if a female size was selected and the reverse if a male size is selected.

Gurvinder Pal Singh

how would that happen?
Do you want that if i select male size, any selections on female sizes should be reset, and vice versa?

PlanAndSimple

ASKER

yes that's it exactly!

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PlanAndSimple

ASKER

works perfectly. Thanks