Hi John,
Given that you want to do this validation and form management
client-side, this topic is proably more suited to a newsgroup about
DHTML scripting, but here goes with the answer anyway...
There are a number of ways you could do this. If it where me, I would
dynamically remove invalid options from the select (drop down) so the
user cannot choose them (this can all be done using javascript quite
easily). However, to achieve the functionality you requested, here's how
I would do it.
First of all, I assume you're delivering the form to the browser in
response to some form of request. When you do, place the original value
of the select into a hidden field. So, let's say the list contains a
bunch of colours for the user to choose from, and the original value is
blue, your form might look something like this:
<form name="frmXyz">
<input type="hidden" name="hdnOriginalColour" value="blue">
<select name="lstColour" onchange="javascript:validateColour();">
<option value="blue" selected>Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</form>
You would of course populate the form in the first place using your
server-side script. This sets up your form. Now in the logic of your
validation function, you're going to do one of two things based on
whether your selection is valid:
1. If it's valid, you update the hidden field to match the new value in
the select, so that an invalid selection at this point returns to the
last valid value.
2. If it's invalid, you change the selectedIndex attribute of the select
to match the text attribute of the selected option to the value in the
hidden field.
My code would look something like this. Bear in mind I haven't tested
this (just wrote it off the top of my head) so you might need to tweak
it a little. Feel free to post again if you have trouble.
<script type="text/javascript">
function validateColour()
{
// Get handles
var objForm = window.document.frmXyz ;
var objList = objForm.lstColour ;
var hdnOrig = objForm.hdnOriginalColour ;
// Is the select option valid?
var strSel = objList.options[objList.selectedIndex].value ;
if( someValidationFunctionOfYourIngeniousDesign(strSel) ) {
// valid selection, so update the original field so we can revert
later if needed
hdnOrig.value = strSel ;
} else {
// invalid option - revert to last valid option. first, tell the
user how naughty they are
alert('Oops, you did a boo-boo!') ;
// next we need to find the index of the correct option
var intIdx = -1 ;
var intMax = objList.options.length ;
for( var intOpt = 0 ; intOpt < intMax ; intOpt ++ ) {
if( objList.options[intOpt].value == hdnOrig.value ) {
intIdx = intOpt ; // this is the index
intOpt = intMax ; // escape the loop
}
}
// do we have a winner?
if( intIdx == -1 ) {
// something went wrong - we didn't find the original value -
time to panic
throw 'a tantrum' ;
} else {
// set the selected index to the last valid option
objList.selectedIndex = intIdx ;
}
}
</script>
I hope this helps. Good luck!
Cheers,
Mark
John said:
Hi,
On an ASP.NET page I have a drop down list control. When the user pulls
down the list and makes a selection, I perform validation, and if the
validation fails I want the selected item in the drop down box to go back to
what the value was before the user tried to change it, but at that point I
will not know what the original value was. Or is there a drop down control
"revert" method, or is there any way of knowing what the original selected
item was?
Or, if I can't 'revert', is there a way to keep the drop down list open (if
validation fails) which would force the user to choose again?
(I need to do all of this on the client-side)
Thanks,
John
