Re: Handling Drop Down Selected Item
- From: Mark Micallef <mark.micallef@xxxxxxxxxxxxxxxxxxxxxxxxxx>
- Date: Wed, 21 Dec 2005 17:52:57 +1100
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 Walker wrote:
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
.
- Follow-Ups:
- Re: Handling Drop Down Selected Item
- From: John Walker
- Re: Handling Drop Down Selected Item
- Prev by Date: need more clipboard functionality in .net
- Next by Date: Re: how to start to ASP.NET 2.0
- Previous by thread: Re: Handling Drop Down Selected Item
- Next by thread: Re: Handling Drop Down Selected Item
- Index(es):
Relevant Pages
|
