Forum Moderators: open
Since I'm pretty new to programming, I have no idea whether it's impossible to do this...or extremely easy. Hopefully the latter!
I have a pretty standard form that registers people for some events. The first drop-down field contains the options for the event dates, including the option "Can't Attend." The second drop-down field contains options for their T-shirt size. Here's the rub: If they can't attend the event, they don't get a T-shirt.
So, is there a way to write a conditional statement before the form is submitted? IF they select the "Can't Attend" option in the first field, THEN the entire second "T-Shirt" field disappears?
Help would be much appreciated!
Just in case it matters, here's the form code:
<tr>
<td align="right" class="label">Event</td>
<td>
<select name="Event" id="0" class="select2" onMouseOver="handleMouseOver(this,myForm);">
<option value="">----- Please Select -----</option>
<option value="Lexington"<%=selected("Event","Lexington")%>>LexingtonPM</option>
<option value="Paramus"<%=selected("Event","Paramus")%>>Paramus</option>
<option value="King of Prussia<%=selected("Event","King of Prussia")%>>King of Prussia</option>
<option value="Gaithersburg"<%=selected("Event","Gaithersburg")%>>Gaithersburg</option>
<option value="Can't Attend"<%=selected("Event","Can't Attend")%>>Can't Attend</option>
</select>
</td>
</tr>
<tr>
<td align="right" class="label">T-Shirt Size</td>
<td>
<select name="Tshirt" id="1" class="select2" onMouseOver="handleMouseOver(this,myForm);">
<option value="">----- Please Select -----</option>
<option value="Large"<%=selected("Tshirt","Large")%>>Large</option>
<option value="Extra Large"<%=selected("Tshirt","Extra Large")%>>Extra Large</option>
<option value="Extra Extra Large"<%=selected("Tshirt","Extra Extra Large")%>>Extra Extra Large</option>
</select>
</td>
</tr>
You can use client side javascript (fastest method) which will hide the second drop down box if they select "Can't Attend".
You can also hide the second one from the start, and only show it if the select something other than "can't attend".
You can also do it on the server side, and if the first box was "can't attend" then you just ignore or give an alternate value for the second field.
Not that difficult, and I think would enhance usability.
I think the first option is what I'm looking for. I know it's not the prettiest or most friendly way, but I really want to avoid doing things on the server side as much as possible because I don't want to mess up how things are submitted to our CRM DB, etc.
This JavaScript method. Do you (or anybody else out there?!) know of a sample script I could use to achieve this? I tried searching the web, but I wasn't quite sure what I was looking for. I saw a lot about "onChange" but I couldn't find an example that worked specifically for my situation.
Thanks much!
-Alison
Best to avoid it if you can.
I'll see if I can post something to help you.
Thanks much!
....
<script language="JavaScript" type="text/JavaScript">
function showother(){
if(document.forms[0].Event.value=="Cannot Attend, Still Interested"){
document.getElementById("otherdiv").style.display = "none"
}else{
document.getElementById("otherdiv").style.display= "block"
}
}
</script>
</head>
<body>
<table>
<form method="post" name="myForm">
<tr>
<td align="right" class="label">Event</td>
<td>
<select name="Event" id="0" onChange="showother()">
<option value="">----- Please Select -----</option>
<option value="Lexington"<%=selected("Event","Lexington")%>>Lexington MA</option>
<option value="Paramus"<%=selected("Event","Paramus")%>>Paramus NJ</option>
<option value="King of Prussia"<%=selected("Event","King of Prussia")%>>King of Prussia PA</option>
<option value="Gaithersburg MD"<%=selected("Event","Gaithersburg MD")%>>Gaithersburg MD</option>
<option value="Cannot Attend, Still Interested"<%=selected("Event","Cannot Attend, Still Interested")%>>Cannot attend, but still interested</option>
</select>
</td>
</tr>
<tr>
<td class="label" colspan="2" align="right">
<div id="otherdiv" style="display:none">
T-Shirt Size
<select name="Tshirt" id="1">
<option value="">----- Please Select -----</option>
<option value="L"<%=selected("Tshirt","L")%>>Large (L)</option>
<option value="XL"<%=selected("Tshirt","XL")%>>Extra Large (XL)</option>
<option value="XXL<%=selected("Tshirt","Extra Extra Large")%>>Extra Extra Large (XXL)</option>
</select>
</div>
</td>
</tr>
</form>
<\table>
...
