dougv.com « Doug Vanderweide » drop down / select list

Working With The authorize.net Server Integration Method (SIM) Payment Gateway, Part 1: Don’t Use JavaScript

Doug Vanderweide — Thu, 23 Feb 2012 18:11:19 +0000

I got an email a few days ago from a reader seeking help with the authorize.net Server Integration Method (SIM) credit card payment gateway.

Specifically, he was asking how he could use JavaScript to pass a calculated total to a PHP page that contains the SIM code.

A customer chooses a series of options from some select lists, radio buttons and the like;
the page calculates an order total;
the end user hits a submit button;
the results are posted to the SIM processing page, which acts as a “confirmation page”; and
The customer presses another button, which takes him to authorize.net to provide payment info and actually charge the card.

You can see an approximation of what I’m talking about here: http://www.dougv.com/demo/js_form_values. The questioner’s form is similar to this approximation in function.

I will show how to properly customize a SIM form, and submit payment requests to authorize.net via SIM, in an upcoming post. This post explores why it’s a terrible idea to process order forms with JavaScript. That is, it’s about the wrong way to use SIM. Stay tuned for the right way.

The direct answer to my reader’s question is simple.

1. Add a hidden form field inside the form:

2. Using JavaScript, assign the calculated total as the value of that hidden form field:


function orderTotal() {
	var total;
	//bunch of code that calculates the total from various form inputs
	total = total.toFixed(2);
	document.getElementById('order_total_input').value = total;
}

3. Add this function as an onsubmit event for the form:

You can see this in action here: http://www.dougv.com/demo/js_form_values.

JavaScript Is Wildly Insecure

That said, this entire approach is wrong-headed, a complete security risk, and likely to backfire.

Never use JavaScript to calculate the values you intend to submit to a credit card processor. For what that’s worth, never use a hidden form fields to pass any variable to a credit card processor.

Always use server-side processing to check, sanitize and process credit card orders.

Why? Because anyone with a basic understanding of JavaScript can easily change the value of any form variable, simply by injecting a script onto your Web page.

You may have heard of Greasemonkey. It’s a Web browser plugin that allows any user to add JavaScript to any Web page. And many Web browsers allow you to add JavaScript to the current page simply by typing it into the location bar.

Using this knowledge, one can easily poison any form variable value on the page. He can not only poison the hidden form input that carries over the total to our shopping cart; he can also poison individual elements.

So, by the same token that the questioner can use this JavaScript to assign a value to order_total_input on form submission:

document.getElementById('order_total_input').value = total;

I can override the orderTotal() function to be just this one line:

document.getElementById('order_total_input').value = '0.01';

And that will set the total cost of my order to 1 cent.

You can see a demo of what I am talking about here: http://www.dougv.com/demo/js_form_values/poison.htm.

Always Process Orders Server-Side

If you don’t check that value at some point, to ensure it is correct, you could easily wind up selling me your entire cart for a penny.

If you use JavaScript to confirm the order total, not only have you duplicated your efforts / code — which is the dictionary definition of inelegant — I can simply poison whatever JavaScript you used to confirm the order total is right, and still send along my one-penny charge.

Now, it’s true that many credit card processors will flag a one-cent charge as suspicious. Many will also flag a $1 charge. But most credit card processors consider a $1 hold entirely appropriate, as a request to confirm a card is valid, and indicative of a charge that will be posted later.

(If you buy gasoline at the pump using a credit card, you know this is how it’s usually handled: A $1 hold is placed on your card, and the actual total for gas is posted as an amended transaction a day or two later, depending on when the gas station’s merchant bank processes its queue.)

So a smart scammer wouldn’t use 1 cent to poison your variable. But if he saw a total charge, for several items, of $150, and one or two of the things he ordered cost $35, he would amend his total, via JavaScript, to $35.

That amount wouldn’t be flagged by the credit card processor, which has no idea what specifically is being bought; only how much you want to charge the customer. It sees a $35 charge, which it has probably processed numerous times on your behalf, as totally legitimate. Such as charge could easily slip past whomever is fulfilling your orders, especially if they are busy, and you haven’t engineered a program that properly checks order totals.

Any Form Variable Can Be Poisoned By DOM Manipulation

Admittedly, a significant part of the problem with the questioner’s approach is that he is using, as values in his form / JavaScript, the actual prices of what he is selling.

Since I know how much he wants to charge for each thing, and because he is calculating his order total based on values contained in HTML elements, I can simply change those values to be whatever I want them to be, via a little Document Object Model (DOM) manipulation.

So, if you have a select list that looks like this:

There is nothing stopping me from writing a Greasemonkey script that changes the values for each of those options:

var tmp = document.getElementById('base_membership');
var i;
for(i = 0; i < tmp.length; i++) {
	tmp.options[i].value = parseFloat(tmp.options[i].value / 10).toFixed(2);
}

Now, his $50 membership only costs me $5, and the $100 membership is a bargain at $10.

You can see this in action here: http://www.dougv.com/demo/js_form_values/poison2.htm.

That is why, again, you should never use JavaScript to calculate a shopping cart total and always process credit card transaction totals on the server side.

I don’t mean to pile abuse onto my questioner.

Quite the opposite; I really appreciate the opportunity he’s provided to address the security issues around using JavaScript to accomplish important tasks, to discuss application security in general, and to set up the future discussion of how to properly implement authorize.net’s Server Integration Method (SIM).

Again, I’ll do that soon.

You can download the demo code for this article here: http://www.dougv.com/wp-content/uploads/2012/02/js_form_values.zip

All links in this post on delicious: http://delicious.com/dougvdotcom/working-with-the-authorize-net-server-integration-method-sim-payment-gateway-part-1-dont-use-javascript

The numbers inside parentheses are relevance scores. Scoring is based, in order of priority, on title, category, content and tags. The higher the score, the more likely that post relates to this post.

Tags: drop down / select list, elegance, Greasemonkey, payment gateway, radio buttons, Server Integration Method

Parent-Child DropDownList Controls In ASP.NET Web Forms (VB.NET)

Doug Vanderweide — Sun, 25 Dec 2011 20:44:40 +0000

Some time ago I promised a formspring anon I would do a tutorial on parent / child DropDownList controls in ASP.NET Web Forms. At long last, I’m delivering. (From here on out, I will use “DropDownList” and “select list” interchangeably.)

Parent-child DropDownList controls means you have a parent, or main / master select list. Based on whatever selection is made in that first DropDownList, a second, “child” or “detail” select list is populated with relevant results.For example, if we had a database of cars, we might have a parent (master) DropDownList of manufacturers — Ford, Chevy, Toyota, etc. — and populate the child DropDownList with models from the selected manufacturer. So, if someone chose Ford in the parent select list, the child select list would automatically populate with choices such as Fusion, Mustang, Explorer, F-150, etc.

I’ll be demonstrating two different ways to accomplish this task, as well as a few variations on the first: First, binding with only SqlDataSource controls, which is by far the easiest way to proceed and will suffice for about 90 percent of applications; second, using code behind and CompareValidator controls, to cover all possible roadblocks.

Some notes before we proceed:

I’ll use the ZIP Code database I’ve been using for a while as the back-end data. I also have a separate table of USPS state codes I’m using as the parent data, to help illustrate that you can use several tables / data sources to fuel this solution, provided the keys that relate the data make sense to each data store. In other words, you can use a lot of different sources for your data, so long as the data is relational.
I’m going to use SQL Server, stored procedures and a connection string stored in my web.config file to access my data. I recognize that some people prefer to use SQL statements / LINQ and the like, or can only use Access / MySQL or other data stores. I really urge you to always use stored procedures, as they are way safer than inline SQL statements. As far as alternative data stores go, that should be a easy a fix as switching your code to use to the relevant ADO.NET ODBC classes, rather than the SQL Client classes.
This solution should work for ASP.NET versions 2.0 forward.

Example 1: Using SqlDataSource Controls

Most ASP.NET Web developers know about the SqlDataSource control and how to databind a DropDownList with that control. What they may not know is that, via the ControlParameter class, we can use the values in any other ASP.NET control(s) — including other databound controls — on the page as query parameters.

All you need to do is indicate, as properties of the ControlParameter, the ID of the control that will provide the key value for your child query, the property of that control (e.g., selected value, text, etc.) which should serve as the key, and the variable name that should be used in that query.

In our example, I have a select list named ddlParent, which will contain a list of state codes I get from a database table. Another select list, named ddlChild, will bind to a SqlDataSource control (named sqlChildDDL) that uses the selected value in ddlParent to retrieve proper records.

In my case, the stored procedure that will get the child records expects a parameter named “StateInitials”, the value of which comes from ddlParent and serves as the key for selecting the proper child records. By setting the AutoPostBack property of the parent DropDownList to true, I ensure the child DropDownList is rebound with the proper records each time the selected index of the parent list is changed.

Demo: http://dougv.net/demos/parent_child_dropdown/Example1A.aspx

Note that we can use any ASP.NET control on the page as a ControlParamter, and we can use any of that control’s properties as a parameter value, regardless of data type.

In other words, we could have a textbox on the page and use its Text property to let people type in free-text terms. (That’s a huge security risk, but it can be done.)

Or we could even use a static control with a non-text property, such as the Parent value of a Label control.

Of course, we need to exercise care here; any parameter value we send to a database query has to be the right data type / something the database store understands how to parse. The point is, ControlParamter is a powerful tool; respect it and it will open a number of possibilities.

Now that we have a parent-child select lists pair, how do we use that data to power some other control’s data? Simple: We just use the SelectedValue of the child DropDownList as the ControlParamter value for another SqlDataSource — in this example, it will bind to a GridView that gives the selected town’s ZIP Code, CityLatitude and CityLongitude.

All we need to do is add the GridView and its SqlDataSource, plus set the AutoPostBack property for ddlChild to true, so that the GridView’s values will change any time ddlChild’s selected index is changed.

See this in action: http://dougv.net/demos/parent_child_dropdown/Default.aspx

Example 1B: A Little Code Behind To Clean Things Up

If you play with the demo above, you’ll notice a problem: Any time you change the selected ListItem in ddlParent, the ListItems in ddlChild are updated, but not the data in the details GridView.

In other words, if you select a new state from the parent select list, the town values in the child select will change to the appropriate entries, but the GridView retains the old data from the previously selected town. Only choosing a new town from the child select list will update the GridView.

That happens because although ddlChild has been populated with new ListItems, the SelectedValue of ddlChild hasn’t been changed. Changing the SelectedValue is an act that must take place within ddlChild, not ddlParent.

In other words, the event that triggered the page to post back was a change in ddlParent’s selected value, not ddlChild. Until we explicitly instruct ddlChild to update its selected value, either programmatically or by hand, as far as ASP.NET is concerned, it retains the last SelectedValue, regardless of the fact that its ListItems have changed.

This behavior is by design and as it should be. But it does make for an annoyance we need to address.

Fortunately, we can fix this with just a little codebehind; namely, an event handler that fires on ddlParent’s OnSelectedIndexChanged event. That handler will:

Rebind ddlChild to its SqlDataSource, which will now contain the correct town list.
Set the SelectedIndex of ddlChild to 0, or the first town in the new list.
Rebind the GridView’s SqlDataSource so it draws from the first town in the updated town list.

Sub ddlParent_selectedIndexChanged(Sender As Object, E As EventArgs) Handles ddlParent.SelectedIndexChanged
	ddlChild.DataBind()
	ddlChild.SelectedIndex = 0
	sqlZipDetails.DataBind()
End Sub

Demo: http://dougv.net/demos/parent_child_dropdown/Example1B.aspx

This pretty much solves our data latency problem, but it adds duplicate queries to the process and thus is inefficient. We can do a better if we get more code-intensive.

Example 2: Using Code Behind And CompareValidator Controls

To streamline the process, reduce database queries and handle potentially bad inputs, we can use code behind to populate our DropDownLists and GridView, plus use CompareValidators to ensure we have legitimate data before sending our database queries.

We’ll bind records to a SqlDataReader, then use that reader to populate the DropDownLists and, where appropriate, the detail GridView. Additionally, we’ll use CompareValidators to ensure that the users have selected a valid option from each DropDownList.

First up, we need to create the DropDownLists and GridView. Notice that both DropDownLists begin with a single, default ListItem with a value of 0.

That’s because our valid options, once this list is populated, will never be zero; as a result, we can test with the CompareValidators whether the selected value of either DropDownList is 0. If it is, we know we have an invalid choice; otherwise, we expect the choice to be valid.

We have several subroutines needed to power this solution.

First, we need to initially populate the parent DropDownList; we’ll do that in the Page_Load subroutine, checking whether this page is a postback. (We don’t want to repopulate the parent select list on every page refresh; if we do, we won’t ever be able to change the child select list’s values, since the selected index of the parent DropDownList becomes 0, automatically, every time it is databound.

Sub Page_Load(Sender As Object, E As EventArgs) Handles Me.Load
	If Not Page.IsPostBack Then
		ddlParent_dataBind()
	End If
End Sub

The process of binding the parent DropDownList is just connecting to the database server, populating a SqlDataReader with records, binding that to the parent DropDownList and indicating which fields should be used for text and values of the resulting ListItems.

Sub ddlParent_dataBind()
	Dim objConn As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConnection").ConnectionString)
	Dim objCmd As New SqlCommand("GetStates", objConn)
	objCmd.CommandType = CommandType.StoredProcedure

	Dim objReader As SqlDataReader

	objConn.Open()
	objReader = objCmd.ExecuteReader()

	If Not objReader.HasRows Then
		ddlParent.Items.Clear()
		ddlParent.Items.Add("No records found.")
		ddlParent.Enabled = False
	Else
		ddlChild.Enabled = True
		ddlParent.DataSource = objReader
		ddlParent.DataTextField = "StateName"
		ddlParent.DataValueField = "StateCode"
		ddlParent.DataBind()
		ddlParent.Items.Insert(0, New ListItem("Select A State ...", "0"))
	End If

	objConn.Close()
	objCmd.Dispose()
	objConn.Dispose()
End Sub

We bind data to the child select list in a similar way, except we’re going to get some sort of key value from the parent DropDownList. So we pass that in as a parameter.

Sub ddlChild_dataBind(strKey As String)
	ddlChild.Items.Clear()

	Dim objConn As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConnection").ConnectionString)
	Dim objCmd As New SqlCommand("GetZIPCodes", objConn)
	objCmd.CommandType = CommandType.StoredProcedure

	objCmd.Parameters.Add(New SqlParameter("StateInitials", SqlDbType.Char, 2))
	objCmd.Parameters("StateInitials").Value = strKey

	Dim objReader As SqlDataReader

	objConn.Open()
	objReader = objCmd.ExecuteReader()

	If Not objReader.HasRows Then
		ddlChild.Items.Clear()
		ddlChild.Items.Insert(0, "Error getting towns list from database")
	Else
		ddlChild.Enabled = True
		ddlChild.DataSource = objReader
		ddlChild.DataTextField = "CityName"
		ddlChild.DataValueField = "ZIPCode"
		ddlChild.DataBind()
		ddlChild.Items.Insert(0, New ListItem("Select A Town ...", "0"))
	End If

	objConn.Close()
	objCmd.Dispose()
	objConn.Dispose()
End Sub

And binding the GridView data is pretty much more of the same.

Sub gvDetails_dataBind(strKey As String)
	Dim objConn As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConnection").ConnectionString)
	Dim objCmd As New SqlCommand("GetCityDetails", objConn)
	objCmd.CommandType = CommandType.StoredProcedure

	objCmd.Parameters.Add(New SqlParameter("ZIPCode", SqlDbType.Char, 5))
	objCmd.Parameters("ZIPCode").Value = strKey

	Dim objReader As SqlDataReader

	objConn.Open()
	objReader = objCmd.ExecuteReader()

	gvDetails.DataSource = objReader
	gvDetails.DataBind()

	objConn.Close()
	objCmd.Dispose()
	objConn.Dispose()
End Sub

Note that in all this databinding, I am not checking for exceptions, such as failure to connect to the database, a problem with the stored procedures, etc.

As I have said before, what makes for workable error trapping on your end is impossible for me to know, which is why I am not including it here. You should always check for errors. Don’t trust your programs won’t break; expect them to break. How you do that is up to you, but you definitely should prepare for failure.

We’ve got one more non-event subroutine to consider before we get into the action: A way to reset the GridView when we don’t have a valid child DropDownList selection.

To do that, we’ll simply set the DataSource of the GridView to nothing (null), then bind it; when a GridView is bound to a null, it is thus empty and, absent having its EmptyDataTemplate or EmptyDataText properties set, simply doesn’t render.

(I recognize that using nulls in this way is lazy. An alternative is to toggle the visibility of the GridView so that it only shows when we know we have good data, but that’s wordier and yes, I am being kind of lazy here.)

Sub gvDetails_reset()
	gvDetails.DataSource = Nothing
	gvDetails.DataBind()
End Sub

OK, with the mechanical parts of our code out of the way, we can handle changes to the selected item indexes of both the parent and child lists.

In the case of a parent select list change, we always know that whatever information is currently in the detail GridView will be outdated. So we’ll reset it, and we’ll rebind the child DropDownList if the selection in the parent DropDownList is valid (which we check with the relevant CompareValidator).

Sub ddlParent_selectedIndexChanged(Sender As Object, E As EventArgs) Handles ddlParent.SelectedIndexChanged
	cvParent.Validate()
	If cvParent.IsValid Then
		ddlChild_dataBind(ddlParent.SelectedValue)
		ddlChild.SelectedIndex = 0
	End If
	gvDetails_reset()
End Sub

When the child DropDownList’s selected index is changed, one of two things are true: Either the selection isn’t valid, in which case we reset the detail GridView, or it’s time to populate the details GridView with a new town’s information.

Sub ddlChild_selectedIndexChanged(Sender As Object, E As EventArgs) Handles ddlChild.SelectedIndexChanged
	cvChild.Validate()
	If cvChild.IsValid Then
		gvDetails_dataBind(ddlChild.SelectedValue)
	Else
		gvDetails_reset()
	End If
End Sub

You can see all this in action here: http://dougv.net/demos/parent_child_dropdown/Example2.aspx. You can also copy and paste relevant code from there. I distribute code under the GNU GPL version 3.

Tags: drop down / select list, Microsoft, MSDN, ZIP Code database

binding a data from database to dropdownlist based on selected item of another dropdown list

formspring.me — Mon, 10 Oct 2011 11:59:18 +0000

I blogged about doing this with PHP / MySQL / jQuery at http://dougv.us/64 , http://dougv.us/4s and http://dougv.us/4r . If you’re looking for an ASP.NET Web Forms version, I’ll add this to my "to blog" list. Can’t say as to when I’ll get around to it, but probably not immediately, sorry.

Ask me anything

Tags: drop down / select list

Parent – Child Select Lists Revisited: Multiple Parent – Child Select Lists Via PHP, MySQL And jQuery

Doug Vanderweide — Sun, 21 Jun 2009 18:04:46 +0000

A while ago, I promised to answer Brian’s request for a demonstration of how to make multiple parent / child select lists — in other words, starting from one drop down / select list, having two or more child lists, each of which, in turn, may act as a parent to another list.

Multiple parent-child select lists are considerably more complicated to program than a single parent-child relationship. Not only do we have additional data relationships to consider (that is, how we’re going to tie child list values to the selected parent values), we now need to plan for what to do if a “middle” relationship is changed (more on this shortly).

Fortunately, we have a starting point in my original parent-child select list post. We don’t need to reinvent the wheel, therefore, so much as we need to upgrade from a horse cart to a Lamborghini.

Overview Of The Approach

As was the case when we had a single child drop-down list, we must begin with relational data for each select list. Apologies to those who consider that obvious, but for n00bs, what I mean is, if you want to select a value from List A and have List B populated with new values, then the values you intend to have in List B must somehow be keyed (linked) to the selection made in List A.

This multiple parent-child select list approach will work for as many parent-nee-child lists you want. If you want to populate 10 or 100 or 1,000 lists, you won’t need to change a single line of JavaScript; however, your PHP “helper” page will need some modification to accommodate all the queries you’ll need, and the more lists you have, the more code you’ll have to put into your HTML (more on this shortly).

For the purposes of this demo, I am going to use the geocoded ZIP Code data I picked up for my post titled, “Getting All ZIP Codes In A Given Radius From A Known Point / ZIP Code Via PHP And MySQL.” I will therefore have four select lists: A parent list of states; a parent-nee-child list of cities within that state; a child list of ZIP Codes for the selected city; and a fourth list that reflects the coordinates of the ZIP Code.

In truth, there will never be more than one set of coordinates for any given ZIP Code, so this isn’t technically a four-list parent-child chain. But I wanted to demonstrate how this solution works for any number of lists you may choose to have, and I’m a bit too lazy to find, upload and clean up new data for this posting alone.

In the case of the data I am using, state, city and ZIP Code are all columns in the same table; the coordinates are a concatenation of longitude and latitude columns. Therefore, this discussion will focus primarily on data in which your select lists represent columns in the same table / view / query results set.

If you have truly relational data — that is, your select list values exist in unique tables / views that are keyed to each other — this approach will still work, but the narrative on programming the PHP “helper page” will be somewhat irrelevant. If there is interest expressed in approaching this problem with truly relational data, I may expand on this post.

Otherwise, the basic ideas here are exactly the same as those I presented in my original parent-child select list post and my follow-up post on validation. This article effectively summarizes those posts and ties them all together into a single solution.

HTML Modifications

To accommodate the hybrid parent-child select lists, we need to add each select list that will be part of our parent-child chain to a common class. We do this not for the purposes of CSS, which is why most people assign an element to a class, but rather to help jQuery pick out of our form all the select lists in the parent-child chain.

In theory, we could have jQuery simply get all select lists, but your form may have select lists that aren’t part of your parent-child chain. Using a class selector allows us to ensure we only deal with drop down lists that are in the chain.

Each parent select list is going to take on a modified onchange event handler. In this case, the handler will take as its first argument the ID of the target select list — that is, the select we intend to populate with new options. The second argument will be the ID of the invoking select list — that is, the immediate parent of the list that is being populated. Those arguments will be followed by the IDs of every other select that is a parent to the target list.

It is important to get the first two arguments in the correct order, for reasons that will be explained shortly. In other words, the first argument to the bindList() function must always be the ID of the target list, and the second argument must always be the ID of the list sending the request. The remaining parent list arguments can be in any order you like.

Let’s take a closer look at how we are invoking bindList():

Line 1, the select list declaration for our “master parent” list, passes to the bindList() function as its first argument the ID of the list it is populating — namely, city — and its second argument is its own ID.

Line 2, a parent-nee-child list, uses as its first argument the ID of the select it will populate (zip), then its own ID (city), and then the name of its parent (state).

Line 3, another parent-nee-child list, first uses the ID of the list it will populate, lat; then its own ID; then all the IDs of its parent and grandparents (city and state).

Line 4, a child list, needs no event handler, because it does not populate any other select.

Some people don’t like to write event handlers directly into HTML code; you may have team development or abstraction concerns. You could, if you wanted, wire up these handlers using jQuery’s $(document).ready() method; I’ve chosen to do it in HTML in order to make things simpler for newer programmers. I discuss wiring up event handlers in jQuery in another post.

All four select lists bear the class ms. You can use this class to apply CSS styling if you want; or, you can make it one of several css class declarations for the select lists in your chain. If you use multiple classes, it doesn’t matter which order they appear, at least not for this solution.

The bindList() Function

The first consideration we have when populating multiple select lists is that we need at least two arguments: The ID of the list to be bound, and the ID of the list calling the function. In other words, the minimum number of arguments that must be passed to bindList() is 2, but will often be more.

Again, the first argument must be the ID of the target list, and the second argument must be the ID of the list calling the function. And again, you must pass as arguments to bindList() the IDs of all grandparent lists, too.

function bindList() {
	if(arguments.length < 2) {
		alert('You did not provide enough arguments to the bindList() function');
	}

For more help on using the arguments array, check out this post.

The clearChildLists() Function

Assured that we have at least the minimum number of arguments, we next want to depopulate all child lists of the sending select list. We’ll do that via a function named clearChildLists(), which takes as its arguments whatever arguments were sent to the bindList() function.

clearChildLists.apply(this, arguments);

The clearChildLists function places every list ID in the parent-child chain into an array, using the each() method of jQuery. We have to reassign these elements to a standard JavaScript array because as of this writing, due to the way jQuery works, we can’t call the arguments array side-by-side with jQuery element notation (I’m sure this will be cleared up at some point).

We’ll use nested for loops to first traverse through all the select lists in the parent-child chain, then check their IDs against the ID list sent to this function by bindList(). And select list not in the arguments list will then be appended to a new array, which holds the IDs of child lists. (This is in large part why we need to pass all parent and grandparent ID lists to the bindList() function).

Finally, we will then clear the options in every child list, and set them to have a single, common message, instructing us to select valid parent values.

function clearChildLists() {
	//function clears values of all lists in parent-child chain that are not sent as arguments

	var lists = new Array();
	var children = new Array();
	var s;
	var tmp;

	//add all parent-child chain lists to array
	$(".ms").each(function() {
		lists.push(this.id);
	});

	//check every parent-child chain select ...
	for(var i = 0; i < lists.length; i++) {
		tmp = false;
		//against the invoking select list and its parents ...
		for(var x = 0; x < arguments.length; x++) {
			//if the chain list is the invoking list or its parent(s), stop
			if(arguments[x] == lists[i]) {
				tmp = true;
				break;
			}
		}
		//if the chain list is not the invoking list or its parent(s), it's a child of the invoking list
		if(!tmp) {
			children.push(lists[i]);
		}
	}

	//if there are any child lists to the invoking list, clear them
	if(children.length > 0) {
		for(var a = 0; a < children.length; a++) {
			addParentSelectMessage(children[a]);
		}
	}
}

function addParentSelectMessage(obj) {
	var s = document.getElementById(obj);
	//remove all options from list
	s.options.length = 0;
	//add option indicating a valid parent value is needed
	s.options[0] = new Option('Select a valid parent value ...', '');
	//disable the list
	s.disabled = true;
}

Note that I could have used splice() at line 21, instead of a Boolean and new array, to remove parent select list IDs from the parent-child chain. I have sacrificed some elegance here in order to be more obvious about what is going on inside the function.

We clear the all child list values to protect against a “middle” list change.

For example, suppose a user goes though this demo and correctly selects a state, city, ZIP Code and coordinates. He then changes the value of the state list.

That would cause the city list to repopulate, but the previously selected ZIP Code and coordinates lists would retain their values. Those values will be wrong, and we want to indicate as much to the end user.

Building The Query String

With the children now clear of values, we can begin building the URL to the helper page. And the way we’re going to do that is twofold.

First, we want to ensure we have a correct selected value from the sending select list — if the value isn’t right, we don’t want to invoke an AJAX request that’s going to crap out on us for want of proper values.

If we do have a legitimate sending value, then we’ll simply iterate all the arguments sent to bindList(), getting their selected values from the respective lists. If we don’t have a legitimate sending-select value, we clear the target list’s values and indicate a proper parent value is needed.

var qs = "list.php?";
var ok = true;
var s;

//list to be bound with values
var target = "#" + arguments[0];
//list that is invoking this function
var sender = "#" + arguments[1];

//clear child list values
$(target).attr("disabled", true);
clearMessage(target);

//change target list to indicate values being retrieved
var s = document.getElementById(arguments[0]);
s.options.length = 0;
s.options[0] = new Option('Getting list ...', '');

if(checkValue(sender)) {
	//build querystring
	for(var i = 1; i < arguments.length; i++) {
		qs += "&" + arguments[i] + "=" + escape($("#" + arguments[i]).val());
	}

	//http get call to helper page
	var theOptions = new Array();
	$.get(qs, function(data) {
			eval(data);
			//on success, bind list as options
			if(theOptions.length > 0) {
				addOptions(target, theOptions);
			}
		}
	);
}
else {
	//replace with error message on invalid parent option
	s.options.length = 0;
	s.options[0] = new Option('Select a valid parent value ...', '');
}

The PHP Helper Page

Our PHP helper page checks the query string values it receives to ensure they are in range. And now, because it is going to handle populating multiple lists, we need to determine which arguments the helper page has received, and therefore which SQL command to build.

/variable validation
if(!preg_match('/^[A-Z]{2}$/', urldecode($_GET['state']))) {
	$output = "alert('State value not in range');\n";
}
elseif(isset($_GET['zip']) && !preg_match('/^[0-9]{5}$/', urldecode($_GET['zip']))) {
	$output = "alert('ZIP Code value not in range');\n";
}
elseif(isset($_GET['city']) && !preg_match('/^[\w \']{1,50}$/', urldecode($_GET['city']))) {
	$output = "alert('City value not in range');\n";
}
elseif(!$link = mysql_connect('server-name', 'username', 'password')) {
	$output = "alert('Could not connect to database');\n";
}
elseif(!mysql_select_db('database-name')) {
	$output = "alert('Could not select database');\n";
}
else {
	//inputs OK and connected; let's query
	if(isset($_GET['zip'])) {
		$sql = "SELECT CONCAT(CAST(latitude AS CHAR), ', ', CAST(longitude AS CHAR)) AS latlng FROM php_zip_code_distance WHERE zip_code = '" . mysql_real_escape_string($_GET['zip']) . "' AND state_code = '" . mysql_real_escape_string($_GET['state']) . "' AND city = '" . mysql_real_escape_string($_GET['city']) . "' ORDER BY zip_code";
	}
	elseif(isset($_GET['city'])) {
		$sql = "SELECT zip_code FROM php_zip_code_distance WHERE state_code = '" . mysql_real_escape_string($_GET['state']) . "' AND city = '" . mysql_real_escape_string($_GET['city']) . "' ORDER BY zip_code";
	}
	else {
		$sql = "SELECT DISTINCT city FROM php_zip_code_distance WHERE state_code = '" . mysql_real_escape_string($_GET['state']) . "' ORDER BY city";
	}

With the SQL set to go, we can execute our query, get back the results, and send those along to bindList().

	if(!$rs = mysql_query($sql)) {
		$output = "alert('Error getting list from database');\n";
	}
	elseif(mysql_num_rows($rs) == 0) {
		$output = "alert('No records found');\n";
	}
	else {
		$i = 0;
		while($row = mysql_fetch_array($rs)) {
			if($i % 5 == 0) {
				$output .= "theOptions.push(new Option('--------------------', ''));\n";
			}
			$output .= "theOptions.push(new Option('$row[0]', '$row[0]'));\n";
			$i++;
		}
	}
}

header('Content-type: text/plain');
echo $output;

Note that I could have used JSON here instead of creating a JavaScript array. JSON would have been far more elegant, but again, I am trying to balance the elegance of this solution against the abilities of most people looking for help with this need. Since far more people are familiar with arrays than JSON, I went with the less efficient array method.

The Remaining JavaScript Functions

Once we have values returned from the helper page, addOptions() re-enables the target list, clears it of any current values, then appends the passed options to the target list.

function addOptions(s, cl) {
	//enable child select and clear current child options
	$(s).removeAttr("disabled");
	//repopulate child list with array from helper page
	var list = document.getElementById(s.replace('#', ''));
	list.options.length = 0;
	for(var i = 0; i < cl.length; i++) {
		list.options[i] = new Option(cl[i].text, cl[i].value);
	}
}

The checkValue() function ensures we got a valid selection from the sending list. Note that I need this function because I am using valueless separators in my lists; if you do not use that technique, you can alter the code to remove this function and all calls to it.

function checkValue(obj) {
	//remove current error message
	clearMessage(obj);
	//if there is an invalid choice, place error message, return false
	if($(obj).val() == "") {
		$(obj).css("background-color", "pink");
		$(obj + "msg").html("« Please make a valid choice");
		return false;
	}
	return true;
}

The clearMessage() function is used to assist with my jQuery-based form validation. If I have an error, I update a span with a warning message for each error, and change the background color of the select list in question; this function “resets” such messages by clearing the inner HTML of the span and setting the select list’s background to white.

function clearMessage(obj) {
	//clear status message for element
	$(obj + "msg").html('');
	$(obj).css("background-color", "white");
}

Finally, checkForm() ensures that I have valid values selected in all of the parent-child chain select lists. If at least one does not contain a valid value, the function returns false and the form is not processed.

function checkForm() {
	var obj;
	var ok = true;

	// for every list in the parent-child chain ...
	$(".ms").each(function() {
		obj = "#" + this.id;
		//if it does not have a valid value, return false
		if(!checkValue(obj)) {
			ok = false;
		}
	});

	return ok;
}

And that completes the code. You can see a working demo here: http://www.dougv.com/demo/ajax_parent_multi_child_select/index.php

You can download the code used in this demo here: Parent – Child Select Lists Revisited: Multiple Parent – Child Select Lists Via PHP, MySQL And jQuery Demo Code

I distribute all code under the GNU GPL version 3.

Tags: drop down / select list

Parent – Child Select Lists Revisited: Validating Selected Options Via jQuery And PHP

Doug Vanderweide — Thu, 21 May 2009 18:02:58 +0000

Recently received via e-mail, in response to my previous blog entry, “Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control“:

Would you be interested in modifying your solution in 2 ways. One would be to have it contain a country downdown as well. So it would be parent, child, child. I looked into attempting it myself, but my head began spinning as I began looking at all the code. The next option that would be nice, would be to have some sort of Dropdown Validation. Once the state is selected and the city is not yet selected, i am able to hit the submit button. So, it would be nice to see a message that says “Please fill choose a city”. …

Thank you,

Brian

I’m actually going to address this in two posts, because the first request — nested parent-child select lists — will take a bit more time to demo and describe than I have at the moment.

However, form validation — namely, ensuring the user chooses valid parent and child values from each select list — is something I can describe quickly and without extensive coding. And it’s a subject I should address, since my previous post noted that server-side validation was important to this solution, but I didn’t describe how to do it.

jQuery Form Validation

The old-school way to validate a form in JavaScript is to invoke the onsubmit event of the form element.

That is, we simply create a JavaScript function that checks whether the selected options within the parent and child lists have a non-empty-string value. If either contained an empty value, we would pop up an alert and shift focus to the select that needs a valid option chosen.

But we’ve already incurred the overhead of jQuery, so why not spice things up a bit? Rather than using an ugly old alert, let’s really draw the user’s attention to elements that need correcting.

In this case, we’ll turn the list with a bad value pink, and append on a message asking the user to select a proper option.

To do that, we first need to add a couple of span elements to our form, one following each of the select elements, to receive the error message when appropriate.

Why span elements? Because div elements are properly used to group sections of markup; that’s why you use them to control layout. And a p or other text element would require extensive formatting to get to line up properly in relation to other form elements. A span is intended to mark HTML for some sort of special consideration; and that’s exactly what we are doing here, showing text under special conditions.

We also need to add a new event handler for the child list; it calls a yet-to-be-defined function called checkOption(), which takes as its argument the id of the select. I have also added a handler for the form’s onsubmit event, which will also be described momentarily. Finally, I have added a submit button, so the form can be posted.


    
        Select a state: 
        
        
    
    

    
        Select a city:

Note that each new span gets an id attribute that starts with the id of one of the lists and ends in “msg.” That’s because we want to be able to efficiently associate each span with its attendant select.

If we use the id of the select and append some other string to it — e.g., “state” + “msg” = “statemsg”, “city” + “msg” = “citymsg” — then we can easily use the same JavaScript function to handle validation of both lists.

The JavaScript Functions

We’ll need three JavaScript functions to complete this task, and we need to amend the bindCity() function slightly to accommodate this validation scheme.

The first step is writing a function that will clear the error message span for either list, and set the background color of the select in question back to white.

function clearMessage(s) {
	//clear status message for element
	$(s + "msg").html('');
	$(s).css("background-color", "white");
}

Note that at line 3, we concatenate the argument of the function — in this case, the id of the select in question — with “msg”, in order to get the id of the span we want to clear.

The checkOption() function, previously noted, does the actual validating. First, it clears the error message for the select in question; next, it sees if the selected option has an empty string for a value. If the value is empty, then we set the background color of the select to pink, add an error message, and disable the submit button.

function checkOption(s) {
	clearMessage(s);
	//invalid choice
	if($(s).val() == "") {
		//place error message, colorize select list, disable submit button
		$(s).css("background-color", "pink");
		$(s + "msg").html("« Please make a valid choice");
		$("#submit").attr("disabled", true);
		return false;
	}
	//element OK, enable submit button
	$("#submit").removeAttr("disabled");
	return true;
}

We need one more function. Because we’re using the onchange event handler to trigger validation for each list, it’s possible the user will simply submit the form immediately after page load, without making a selection; it’s also possible he will submit the form after selecting a proper parent option, but not a valid child option.

So, it turns out we still need a handler for the form’s onsubmit event. This function will call checkOption() for each of the selects; if both pass, the form is submitted; otherwise, the submit button is disabled and the form is not processed.

function checkForm() {
	//check both select lists for valid values
	var ok1 = checkOption('#state');
	var ok2 = checkOption('#city');
	if(ok1 && ok2) {
		return true;
	}
	else {
		//bad option in one or both lists, disable submit button
		$("#submit").attr("disabled", true);
		return false;
	}
}

Finally, we need to tweak the bindCity() function to use our new form validation scheme. We do that by calling clearMessage(), then using checkOption() to see if the state select has a non-empty value. If so, we go ahead and update the child list.

function bindCity() {
	//disable child select list
	$("#city").attr("disabled", true);
	//clear error message if it exists
	clearMessage("#city");

	//check selection
	if(checkOption("#state")) {
		//clear child select list's options
		$("#city").html('');

		//querystring value is selected value of parent drop down list
		var qs = $("#state").val();
		//show message indicating we're getting new values
		$("#city").append(new Option('Getting city list ...'));
		//declare options array and populate
		var cityOptions = new Array();
		$.get("citylist.php?statecode=" + qs, function(data) {
				eval(data);
				if(cityOptions.length > 0) {
					addOptions(cityOptions);
				}
			}
		);
	}
	else {
		$("#city").val() = '';
	}
}

And with that, we have a fully functional, jQuery-powered, pretty-in-pink validation script.

PHP Validation

While it’s a lot less glamorous, validating our inputs with PHP is far more important than a jQuery validation script. Remember, users can not only disable JavaScript, they can add, modify and delete any JavaScript on / to your page. Therefore, we need to ensure any form values we get back from a page are in range — that is, contain values we anticipate getting.

The easiest way to do that is with regular expressions.

A quick aside on sanitizing form values in PHP: PHP 5.2.0 and later ships with data filtering extensions built in. These filters and sanitizers are exceedingly handy, and at some point I will demonstrate using them. For now, because this problem is so limited in scope, I’m going to use PCRE.

We know the value of state should be two capital letters, and the value of city should be a mix of capital and lower-case letters, with an occasional apostrophe, period or space. So, a couple of regular expressions nested in an if-else statement is all we need for validation

	if(isset($_POST['submit'])) {
		if(!preg_match('/^[A-Z]{2}$/', $_POST['state'])) {
			echo "You did not select a proper state option. Please try again.\n";
		}
		elseif(!preg_match('/^[A-Za-z\'\.\s]{3,25}$/', $_POST['city'])) {
			echo "You did not select a proper city option. Please try again.\n";
		}
		else {
			echo "You selected $_POST[city], $_POST[state].\n";
		}
	}

And that’s all there is to it. You can see a working demo here:

http://www.dougv.com/demo/ajax_parent_child_select_1

To test just the PHP part of the script, simply disable JavaScript.

I distribute all code under the GNU GPL Version 3. There’s no download file this time; when I do the multiple child select list demo, I’ll provide a download file that encompasses this entry.

All links in this entry on delicious: http://delicious.com/dhvrm/parent-child-select-lists-revisited-validating-selected-options-via-jquery-and-php

Tags: drop down / select list

Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control

Doug Vanderweide — Fri, 24 Apr 2009 05:06:10 +0000

Recently asked on Yahoo! Answers:

How to generate a submenu on the basis of value in a menu without refreshing the page?
I want to use if else construct to generate a submenu on the basis of value from a textfield in the same form. You can get it in the way that when someone selects a country in a field…the states menu of the form changes according to the country selected.

This question, rephrased: You have two HTML select lists; one contains parent values — for example, a list of states — and the other will contain child values — say, a list of cities in the selected state. Every time the value in the parent drop down list is changed, the values in the child drop down list are also changed. (I’ll be using the terms select list and drop down list interchangeably.)

This is a fairly common programming problem, and there are lots of examples out on the Web on how to solve it. So why write another one?

Primarily, because this question is so common. Most of the questioners on Yahoo! Answers are beginners, and as a result, a significant number don’t necessarily know how to phrase a Web search to find a tutorial. Far easier, then, to demonstrate the technique here and simply refer Yahoo! Answers users to this blog entry.

The executive summary: We’ll use AJAX to query a database seamlessly in the background every time the value of the parent select list is changed. More specifically, we’ll use the jQuery library to handle the AJAX requests, bind the child list and make sure the form can’t be processed until the request is complete.

Before We Start: You Need Relational Data

In order to have parent and child drop down lists, you must have parent and child data that is relational. In other words, whatever is going to appear as an option in the child drop down list has to be determined by some value in the parent list.

I know this sounds obvious, but you need to plan your data properly for a parent / child select list scheme to work. For example, suppose you have a parent select list which contains all the world’s manufacturers of automobiles. You want the child drop down’s options to be all the car models made by the manufacturer selected in the parent drop down list.

To do that, you have to have data that keys car models to their manufacturers. You can do that a couple of ways:

You might have just a table of car models, which contains a column of standardized values for each manufacturer (in other words, for all cars made by Ford, “Ford” is the only value in the manufacturer column of your car models table).
You might have two tables, one of manufacturers and another of models, where the model table has a foreign key to the manufacturer table.
You have some other structured data source, such as an array or a class, that groups firmly together the manufacturers and models of cars they make.

Once more: You must have a way to take a value from the parent list and equate it to some subset of child records. And that, in short, means relational data.

Step 1: Get jQuery

If you don’t already have a copy of jQuery on your Web site, you’ll need to download it. It’s free from http://docs.jquery.com/Downloading_jQuery. Either the “minified” or uncompressed version is fine; elegance dictates downloading the “minified” version.

Once you’ve downloaded the file, upload it to your Web site. Then, create a script tag in your Web page’s head section that imports the jQuery library:

Step 2: Create The Select Lists

With the jQuery library on the page, we can now create the parent select list and its child.


    
        Select a state: 
        
    
    

    
        Select a city:

We will create the values for the parent select list using a normal PHP script on the page. That’s because no matter what, we need to get the values for the parent drop down list every time the page is loaded; and the values in the parent select list will never change.

I’m going to use states and cities for my data. Specifically, I will be getting the parent values — states — and child values — all the cities in the selected state — from the ZIP Codes table I created a few weeks ago, for the blog entry titled, “Getting All ZIP Codes In A Given Radius From A Known Point / ZIP Code Via PHP And MySQL.”

I’m also going to use a variation on another previous post, “Revisited: Adding Non-Selectable ListItem Controls To An ASP.NET DataBound List Control“, to help break up these long lists.

Doing that is simple: We just declare a counter variable, increment it by one every time we read a record, and see if the modulus of that counter variable divided by five is zero. If it is, we output a dashed line.

Cannot connect to database server\n";
}
//error if cannot select database
elseif(!mysql_select_db('database')) {
	echo "\n";
}
else {
	//error if problem parsing query
	if(!$rs = mysql_query("SELECT DISTINCT state, state_code FROM php_zip_code_distance ORDER BY state")) {
		echo "\n";
	}
	//error if query returns no records
	elseif(mysql_num_rows($rs) == 0) {
		echo "\n";
	}
	else {
		//ouput records
		$i = 0;
		while($row = mysql_fetch_array($rs)) {
			//create separator every five records
			if($i % 5 == 0) {
				echo "\n";
			}
			echo "\n";
			$i++;
		}
	}
}
?>

Step 3: The citylist.php “Helper” Script

We’re going to need a PHP “helper” script, which will receive from our yet-to-be-written AJAX request the name of the selected state, and returns a listing of all the cities in that state.

This is basically just a normal PHP page, except instead of outputting our results as HTML, we’re going to send the results as plain text — or, more specifically, as text we can process as JavaScript.

More on how we do that processing in a bit. Let’s focus now on getting the relevant records. Our helper script does the following:

Uses a regular expression to check if there is a GET variable named statecode that consists of two capital letters. If not, the script alerts us to that fact.
Connects to the database server and selects the database, or reports errors if either cannot be done.
Selects all city records for the given state code (which we ensured was in the proper format with our first step), and reports if there was a database error or no records were found.
Adds all the city records to a JavaScript array (we’ll discuss that shortly), with periodic separators as we did for the parent select list.

Step 4: The bindCity() JavaScript Function

We’re ready to get jQuery to send to the helper page a request for the child records — again, in this example, a listing of all cities within the selected state. Our function will:

Disable the child list, so that incorrect / inappropriate selections cannot be made while we wait for new records.
Clear the current values of the child list, in preparation of new values.
Presents a message to the user that we are getting new child records.
Gets the value of the selected item in the parent drop down list. If that value is an empty string (i.e., a separator), the script indicates the option is invalid. Otherwise, it appends the parent select list’s value as the value of the statecode GET variable.
The helper script is called, its results evaluated as JavaScript, and a second function — addOptions — is called to populate the child list, provided we got options back from the database.

function bindCity() {
	//disable child select list
	$("#city").attr("disabled", true);
	//clear child select list's options
	$("#city").html('');

	//querystring value is selected value of parent drop down list
	var qs = $("#state").val();
	//if user selected a separator, show error
	if(qs == '') {
		alert('You cannot select this option. Please make a different selection.');
	}
	else {
		//show message indicating we're getting new values
		$("#city").append(new Option('Getting city list ...'));
		//declare options array and populate
		var cityOptions = new Array();
		$.get("citylist.php?statecode=" + qs, function(data) {
				eval(data);
				if(cityOptions.length > 0) {
					addOptions(cityOptions);
				}
			}
		);
	}
}

The addOptions() function accepts as an argument the list of options we got from the database. It then re-enables the child select list, clears all its current options (namely, the message we sent in bindCity(), saying we were getting the child records) and then adds all the available options.

Unfortunately, due to a limitation in Internet Explorer, we cannot use jQuery notation to add options to the child select list; we have to use old-school DOM scripting. This is especially disappointing as Jim O’Neil of Microsoft has stated on his blog, and in my presence on more than one occasion, that Microsoft is committed to jQuery’s development. A DOM manipulation technique as simple and straightforward as appending options to a select list ought to be supported by IE.

function addOptions(cl) {
	//enable child select and clear current child options
	$("#city").removeAttr("disabled");
	$("#city").html('');
	//repopulate child list with array from helper page
	var city = document.getElementById('city');
	for(var i = 0; i < cl.length; i++) {
		city.options[i] = new Option(cl[i].text, cl[i].value);
	}
}

And that’s all there is to it.

You can see a working demo here: http://www.dougv.com/demo/ajax_parent_child_select/

You can download the PHP pages — both the form containing the parent / child select lists and the helper page — from here: Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control Demo Code. I distribute all code under the GNU GPL.

All links in this post on delicious: http://delicious.com/dhvrm/using-ajax-to-data-bind-a-child-drop-down-list-based-on-the-selected-option-of-a-parent-select-control

Two Quick Postscripts

Note that this solution requires JavaScript to work. As such, if you are going to send the values of these select lists to a server-side script (e.g., a PHP page), you will want to be extra careful to ensure you get values from the child list, and that any such values are sanitized by your server script — since users can easily amend the values sent to your form via JavaScript.

Also, if you want to use the data for this example, you will need to follow the process noted in Step 1 of the my post titled, “Getting All ZIP Codes In A Given Radius From A Known Point / ZIP Code Via PHP And MySQL.”

Tags: drop down / select list

Moving ListItems From A ComboBox / DropDownList To A ListBox In .NET

Doug Vanderweide — Sat, 21 Feb 2009 06:43:44 +0000

Recently asked on Yahoo! Answers:

ComboBox Question in Visual Basic?
I am trying to create a combobox dropdown list of countries. When user click on a country, it should add to the listbox. I manage to do it. But I want to enhance some form of checking. If the country is already added in the listbox, the user should not be able to select the same country again. These are my codes, but it won’t work. I don’t know what’s wrong. Can someone please help? Thanks!

For Each country As String In lstCountry.Items
If country Is cbxCountries.SelectedItem Then
MsgBox(“County already selected.”, MsgBoxStyle.Information, )
Else
lstCountry.Items.Add(cbxCountries.Select…
End If
Next

Thanks to .NET’s totally object-oriented approach to programming — especially its modularity, encapsulation and polymorphism — moving the selected value of a ComboBox (in ASP.NET, a DropDownList) control to a ListBox control takes three lines of code. And removing that same item from the ComboBox takes just one more line.

Because I want to demo this, I’ll be writing this in ASP.NET. However, it will translate just fine to Windows Forms, as well; the questioner doesn’t state which he’s using, but my guess is it’s Windows Forms, since he’s using a ComboBox control.

The Power Of Object-Oriented Code

Some quick notes before we start with the coding.

Most of what I am about to do will translate fine to Windows Forms. However, ASP.NET and Windows Forms aren’t the same thing. Most important, the ComboBox and ListItem controls in Windows Forms can basically use any object as their options; but in ASP.NET, both a DropDownList and a ListBox use the ListItem class.

That might seem like a huge problem for demonstration purposes, but thanks to encapsulation and polymorphism, it doesn’t really matter.

In the case of Windows Forms, options in a ComboBox or ListBox are stored in an ObjectCollection; in ASP.NET, options for DropDownList and ListBox controls are stored in a ListItemCollection. Those collections pretty much share the same methods and properties; the parent controls have the same methods and properties for addressing those collections, too.

So while the controls we will use are different between ASP.NET and Windows Forms, the code we use in either case is almost exactly the same. That’s the strength of object-oriented programming.

Finally, from here on out, unless I state otherwise, I will be using “ComboBox” and “DropDownList” interchangeably.

OK, on with the code.

Step 1: The ComboBox And ListBox Controls

As I just noted, we need to create the ComboBox (DropDownList) control that contains our initial values, plus a ListBox control. You do this as you normally would in Windows Forms: Most people drag the controls from the toolbox onto the form, then set the properties as required.

In the case of ASP.NET, we simply declare a DropDownList and ListBox control on our ASPX page, and add ListItem controls to the DropDownList.

We need to have, as the first item in the ComboBox / DropDownList, a non-selectable item. (You can read my previous entry on non-selectable ListItems for exotic ways to accomplish this task; here, it’s simply an option with no value).

We need to do this because we’ll be removing the selected options from the ComboBox, which will reset the selected index of the ComboBox to be the first item. That means, if we have a list of 10 things, we could only move nine of them; the 10th item would be selected once we remove the 9th item, and therefore, we wouldn’t be able to fire the SelectedIndexChanged event; there aren’t any other options to select.

(Note that I have to add an AutoPostBack attribute to the DropDownMenu control, so that changing the selected index of the DropDownList will make the page post back to the server. Of course, there’s no such property for a ComboBox.)

Step 2: The Code

As noted above, doing what the questioner wants is as simple as creating an OnSelectedIndexChanged event handler for the ComboBox control.

And as previously noted, we can use fundamentally the same code to accomplish this task in ASP.NET or Windows Forms. In the case of ASP.NET, we’re working with a ListItem control; in Windows Forms, a generic Object. The code below is set for ASP.NET, just comment out its line and comment in the correct one.

Sub cbxCountries_selectedIndexChanged(ByVal Sender As Object, ByVal E As EventArgs) Handles cbxCountries.SelectedIndexChanged
	If Not String.IsNullOrEmpty(cbxCountries.SelectedValue) Then
		'reset selected index for listbox; this is required for adding new listitems
		lstCountries.SelectedIndex = -1

		'ASP.NET version: add selected listitem to listbox
		Dim lsiSelected As ListItem = cbxCountries.Items(cbxCountries.SelectedIndex)

		'Windows Forms version: add selected listitem to listbox
		'Dim lsiSelected As Object = cbxCountries.Items(cbxCountries.SelectedIndex)

		lstCountries.Items.Add(lsiSelected)

		'remove selected from combobox
		cbxCountries.Items.RemoveAt(cbxCountries.SelectedIndex)
	End If
End Sub

The code above does the following:

We first check to see if the value of the selected option is an empty string. We do that because we don’t want to insert the “Select …” option into our ListBox. Again, the “Select …” item exists to ensure our OnSelectedIndexChanged event fires.
We clear the selected index of the ListBox. Every time we add a ListItem to the ListBox, it becomes the selected index of the ListBox control. If our ListBox is set to be a single-selection ListBox — the default behavior, and the case in this demo — an error will be thrown if an option was already selected in the ListBox, because there would then be two selected options. If your ListBox is set to multiple-selection, you need not reset the selected index of the ListBox. There are also ways to retain the selected index of the ListBox when adding a new ListItem to it; I will demo that if asked.
We declare a generic ListItem or Object control and set it to be whichever ListItem or Object is selected in the ComboBox.
We use the Add method of the ListItemCollection / ObjectCollection to append the selected option to the ListBox. There are ways to place the inserted item at the top of the list, and I will demo that if there is interest.
We use the RemoveAt method of the ListItemCollection / ObjectCollection to remove the selected option from the ComboBox.

And that’s all there is to it. You can see this in action here:

http://www.dougv.net/demos/combo_to_listbox/

I distribute all code under the GNU GPL version 3.

All the links in this post on delicious.com: http://delicious.com/dhvrm/moving-listitems-from-a-combobox-dropdownlist-to-a-listbox-in-net

Tags: drop down / select list

Revisited: Adding Non-Selectable ListItem Controls To An ASP.NET DataBound List Control

Doug Vanderweide — Sat, 07 Feb 2009 22:34:16 +0000

Last August I had quickly blogged on the subject of adding non-selectable ListItem controls to an ASP.NET DropDownList. At the time I didn’t have an easy way to demonstrate how that code worked — and, in all honesty, I hadn’t tested it thoroughly, so it had some problems.

But now, thanks to GoDaddy’s dirt-cheap ASP.NET Web hosting, I can run dougv.net, the ASP.NET demo site I had promised some time ago.

I’ve finally gotten around to configuring that new site and getting it to run the way I want, so at long last I can post this revisiting of the original post, which has actually been sitting around on my hard drive since last September.

Let’s first define some terms for less-experienced ASP.NET developers.

Control: An ASP.NET control is any Web page element — a text box, select list, image, div, whatever — that either allows the user to change its value (e.g., a text box or select list) or that had its contents / value / rendering changed on the server side (such as a GridView that is populated by a SqlDataSource).

So for most intents and purposes, an ASP.NET control is any Web page element that runs at the server.

Databound: A control is databound when its contents / options have been set with specific information. For example, a select list (DropDownList) is databound as soon as we add an option (ListItem) to it.

Some resources on the Web claim databinding only takes place if you use an external data store, such as an XML file or SQL Server database, to populate the child controls of a databound control (for example, to add ListItem controls to a DropDownList). That is incorrect: A control is technically databound if we set any of its properties. For example, a TextBox control is technically databound if we initially set its Text property.

OK, with those definitions out of the way, let’s visit the next obvious question: Why in the world would you want a non-selectable ListItem?

Because often, the number of items in a list-style control — namely, a select / DropDownList, but in ASP.NET, also a CheckBoxList or RadioButtonList control — can get unwieldy. If you have a list of, say, 30 options in a select list, it’s going to be difficult to pick the 17th option out of that list.

But if you broke the list up into groups of 5, it’s as easy as going to the fourth group and picking the second item from the top. That’s where the non-selectable ListItem comes in: We create an option that only serves the purpose of breaking up our list visually; it does not contain a valid value, and we don’t want to let users send that invalid value to our application.

Consider: Which of these lists is easier to read?

03901    BERWICK
03902    CAPE NEDDICK
03903    ELIOT
03903    SOUTH ELIOT
03904    KITTERY
03905    CUTTS ISLAND
03905    KITTERY POINT
03906    NORTH BERWICK
03907    OGUNQUIT
03908    SOUTH BERWICK
03909    YORK
03909    YORK CENTER
04001    ACTON
04002    ALFRED
04003    BAILEY ISLAND
04004    BAR MILLS
04005    ARUNDEL
04005    BIDDEFORD
04005    DAYTON
04005    LYMAN
04006    BIDDEFORD POOL
04008    BOWDOINHAM
04009    BRIDGTON
04009    SOUTH BRIDGTON
04009    WEST BRIDGTON
04010    BROWNFIELD
04010    EAST FRYEBURG
04010    WEST DENMARK
04011    BIRCH ISLAND
04011    BRUNSWICK

03901    BERWICK
03902    CAPE NEDDICK
03903    ELIOT
03903    SOUTH ELIOT
03904    KITTERY

03905    CUTTS ISLAND
03905    KITTERY POINT
03906    NORTH BERWICK
03907    OGUNQUIT
03908    SOUTH BERWICK

03909    YORK
03909    YORK CENTER
04001    ACTON
04002    ALFRED
04003    BAILEY ISLAND

04004    BAR MILLS
04005    ARUNDEL
04005    BIDDEFORD
04005    DAYTON
04005    LYMAN

04006    BIDDEFORD POOL
04008    BOWDOINHAM
04009    BRIDGTON
04009    SOUTH BRIDGTON
04009    WEST BRIDGTON

04010    BROWNFIELD
04010    EAST FRYEBURG
04010    WEST DENMARK
04011    BIRCH ISLAND
04011    BRUNSWICK

The blank spaces in the right-hand list above represent where we might insert non-selectable ListItem controls to “break up” the list.

Of course, the limitations of the Web are that you can’t easily prevent end users from choosing a specific option from a select list. Sure, you can do it with JavaScript (and I would be willing to blog on how to do so if anyone asks), but you can’t rely on JavaScript to provide your applications with good data.

Fortunately, ASP.NET makes evaluating a non-selectable ListItem as simple as checking its value. In other words, as long as we explicitly declare the Value property of a ListItem control to be an empty string, we can make that ListItem non-selectable.

Example 1: The Basics

Let’s start by hand-coding a DropDownList with several ListItems. We’ll add in a Label control that we will change based on the selected item in the DropDownList, and we’ll set the DropDownList’s AutoPostBack property to true, so that every time we change selections, the page will be sent back to the server for processing.

Note that we explicitly set the value of the non-selectable items to be an empty string. Again, that’s how we’re going to determine if the ListItem is non-selectable; if it contains no value, we know the user shouldn’t have selected it.

We can do this programmatically very easily. We simply ask if the SelectedValue property of the DropDownList — that is, the value of the ListItem which is currently selected — is an empty string. If so, the Label control is changed to indicate the option is not available; if not, the Label control is changed to reflect the choice made.

Sub ddlVacation_postBack(ByVal Sender As Object, ByVal E As EventArgs)
    If ddlVacation.SelectedValue = String.Empty Then
        lblMessage.Text = "Sorry, that's not an option. Please choose again."
        lblMessage.Font.Bold = True
        lblMessage.ForeColor = Drawing.Color.Red
    Else
        lblMessage.Text = "I would love to go to " & ddlVacation.SelectedValue & "!"
        lblMessage.Font.Bold = False
        lblMessage.ForeColor = Drawing.Color.Black
    End If
End Sub

Working demo: http://www.dougv.net/demos/non_selectable_listitem/default.aspx

Example 2: Periodic Separators In A DataBound Control

A more useful tactic is automatically programming separators into a collection of ListItems that you have retrieved from an external data store, such as a database.

For example, I have a database table that lists all 50 US states plus their postal codes. Perhaps I want this list to be easier on my users’ eyes and make it easier to pick out a given state.

To do that, I will break the list up into 10-state sections. And to accomplish that, I am going to have to get old school and programmatically bind the database’s result set to the DropDownList control.

First, let’s look at the control / page cod, which is the simple control declarations: the DropDownList, a Label and a Button.

The codebehind is a bit more complex, because we need to open a connection to the database, query it for records, then create the ListItems from those records, periodically inserting our non-selectable separators.

We use three subroutines to accomplish this task: Page_Load is used to trigger the initial population of the DropDownList. ddlMyList_dataBind actually adds the ListItems to the control. And btnSubmit_click handles the postback.

Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        'bind the dropdownlist
        ddlMyList_dataBind()
    End If
End Sub

Sub ddlMyList_dataBind()
    'Subroutine that binds listitems to dropdownlist
    'This requires the System.Data and System.Data.SqlClient namespaces

    'Open connection to database; declare SQL statement
    'You really should use parameterized stored procedures, but we'll do this as straight SQL
    Dim objConn As New SqlConnection("my connection string")
    Dim objCmd As New SqlCommand("SELECT * FROM states_table ORDER BY state_name ASC", objConn)
    objCmd.CommandType = CommandType.Text

    'We need a generic loop counter
    Dim I As Integer = 0

    Try
        'connect to db
        objConn.Open()
        'create a data reader and populate it with SQL statement results
        Dim objReader As SqlDataReader = objCmd.ExecuteReader()

        'if the reader has records, let's bind the results
        If objReader.HasRows() Then
            'go through all items in the recordset
            'we'll read the items one by one
            Do While objReader.Read()
                'add a heading at the top of the list and every 10 additional items
                If I Mod 10 = 0 And I < 50 Then
                    ddlMyList.Items.Insert(I, New ListItem("--------------------", String.Empty))
                Else
                    'add the current data reader item
                    ddlMyList.Items.Insert(I, New ListItem(objReader("state_name"), objReader("state_code")))
                End If
                'increment the loop counter
                I += 1
            Loop
        Else
            'report that there are no items to display in the list
            ' and disable the dropdownlist
            lblStatus.Text = "There are no records for this item"
            ddlMyList.Enabled = False
        End If

        'close the connection
        objConn.Close()

    Catch ex As Exception
        'if there is an error, report it
        ' and disable the dropdownlist
        lblStatus.Text = ex.Message
        ddlMyList.Enabled = False
    End Try

    'clean up the database objects
    objCmd.Dispose()
    objConn.Dispose()
End Sub

Sub btnSubmit_onClick(ByVal Sender As Object, ByVal E As EventArgs) Handles btnSubmit.Click
    'report when a non-selectable item has been selected
    'non-selectable items have no values
    If String.IsNullOrEmpty(ddlMyList.SelectedValue) Then
        lblStatus.Text = "You cannot select this item. Please select a different item."
        lblStatus.ForeColor = Drawing.Color.Red
        lblStatus.Font.Bold = True
    Else
        lblStatus.Text = "Postal code: " & ddlMyList.SelectedValue
        lblStatus.ForeColor = Drawing.Color.Black
        lblStatus.Font.Bold = False
    End If
End Sub

Note that we check for postback in the Page_Load subroutine. Every time btnSubmit is clicked, the page is sent via postback. If we didn’t check, therefore, whether the page was being posted back, we would databind anew the DropDownList every time the page is loaded — effectively wiping out whatever choice we made.

Working demo: http://www.dougv.net/demos/non_selectable_listitem/databound.aspx

Example 3: With A CustomValidator Control

This is what I was after with my initial post: A simple way to use ASP.NET’s built-in validation controls to do what they are designed to do, namely, validate input.

The problem is that ASP.NET List controls are not amenable to validation controls out of the box. Basically, you need to create a CustomValidator that isn’t specifically set to validate the given control, then write an explicit OnServerValidate event handler that uses the List control’s name, rather than the passed ServerValidateEventArguments.

That sounds more complicated than it actually is. Let’s start with the page / control code:

And now, the codebehind. Note that every time we call the OnSelectedIndexChanged event handler for the DropDownList, we need to validate the page; that is the only way to get the CustomValidator to fire. If we don’t call Page.Validate, the CustomValidator will not be invoked at all.

Sub ddlVacation_postBack(ByVal Sender As Object, ByVal E As EventArgs)
    Page.Validate()
    If Page.IsValid Then
        lblMessage.Text = "I would love to go to " & ddlVacation.SelectedValue & "!"
    End If
End Sub

Sub cvVacation_serverValidate(ByVal Sender As Object, ByVal E As ServerValidateEventArgs)
    If ddlVacation.SelectedValue = String.Empty Then
        E.IsValid = False
        lblMessage.Text = ""
    End If
End Sub

Working demo: http://www.dougv.net/demos/non_selectable_listitem/validator.aspx

Notice that this is startlingly similar to Example 1. In fact, you could argue that Example 1 is more elegant. So why bother with the CustomValidator?

One thought is that you might want to validate all your controls only once, at the time the page is submitted. If so, you can simply add Page.Validate to the subroutine or function that handles your postback processing, so that all controls are fired at once.

You might also want to validate proper input as part of a group of items on a page. For example, you might have a DropDownList that gives a series of state names, and a textbox next to it that asks for a ZIP Code; it may be that you want to ensure a proper state is chosen, then ensure the ZIP Code provided is valid for the state given, before proceeding to another part of the form.

To do that, you would set the ValidationGroup property of both controls’ validators — for the DropDownList, a custom validator; for the TextBox, perhaps another CustomValidator, or perhaps a CompareValidator or RegularExpressionValidator — to be the same, so that they effectively validate as a single item.

All the links in this post on delicious: http://delicious.com/dhvrm/revisited-adding-non-selectable-listitem-controls-to-an-aspnet-databound-list-control

Tags: drop down / select list, elegance

A Simple YouTube Jukebox Using JavaScript / DOM And deconcept’s SWFObject

Doug Vanderweide — Tue, 03 Jul 2007 03:35:16 +0000

Recently asked on Yahoo! Answers:

HTML Help – Dropbox with Loading Option?

Okay, here’s my issue. I have a decent piece of coding that gives me a dropbox. The dropbox has a ‘go’ button, and it is filled with titles of music videos from YouTube.

Now, used alone, it’s fine. It opens a new page, which plays the youtube video.

However, I was clever enough to grab the *embed* names. So, it doesn’t load a simple youtube page, but simply the video in a website.

So now, I need some HTML help. I would like to create an object that sits next to the dropbox and plays the video when you select ‘go’, instead of it loading a new page.

I know how to make an embedded video. I know how to make the dropbox. Unfortunately, I don’t know how to make the dropbox and the embedded video interact, so that I can select the video I want to play.

This is very easy to do, thanks to deconcept’s excellent SWFObject JavaScript library and the questioner’s work in extracting the Flash FLV player URLs from all the videos he wants to show.

So, let’s get right on making a YouTube jukebox!

Step 1: The Form

Our form couldn’t be simpler: It’s just a SELECT list that holds all the URLs to our files, which also has an onchange event set to a JavaScript function named playVideo(). We’ll create that function soon.


	Select A Video:

Step 2: The DIV

We also need a simple DIV in which we will dynamically place the Flash player we get from YouTube. That’s as simple as making a DIV that has an ID of jukePlayer. I’ve also set aside some CSS code to space for the player once it comes in, by fixing the DIV’s height and width to the size of the average Flash player.

div#jukePlayer {
	width: 425px;
	height: 350px;
	margin: 10px 0 10px 0;
}

Step 3: deconcept’s SWFObject JavaScript

We need a way to dynamically change the DIV’s innerHTML to be an embedded instance of the Flash Player. Thankfully, there’s a great JavaScript library out there already that will do that for us: deconcept’s SWFObject.

All we need to do is download the JavaScript they supply, upload the enclosed swfobject.js file to our Web site, and make reference to it with a SCRIPT tag in our page’s HEAD segment.

Step 4: The playVideo() Script

To bring it all together, we need to make a script that gets the chosen item in our SELECT menu and drop its video into our DIV. That’s as easy as getting the SELECT via getElementById, then iterating through all its options until we find the selected item.

Once we find the selected item, we create a new SWFObject, pass it the parameters it needs, and tell it to place the player in our DIV.

Note that we also accept two arguments in the playVideo() function: autoplay and loop. If you send a value of 1 for autoplay, then the video will start playing once it loads; if you send a value of 1 for loop, the video will play back continuously.

You must send values for both parameters, but only values of 1 matter; any other value will be ignored.

function playVideo(autoplay, loop) {
	var theSelect = document.getElementById("jukeVids");
	var theArgs;
	if(autoplay == 1) {
		theArgs = "&autoplay=1";
	}
	if(loop == 1) {
		theArgs += "&loop=1";
	}

	for(var i = 0; i < theSelect.length; i++) {
		if(theSelect.options[i].selected) {
			var so = new SWFObject(theSelect.options[i].value + theArgs, "mymovie", "425", "350", "8", "#fff");
			so.write("jukePlayer");
			break;
		}
	}
}

And that’s all there is to it. You can see the script in action here:

http://www.dougv.com/demo/js_youtube_jukebox/

You can simply save the page to your computer and modify it to your content. My work is distributed under the GNU GPL version 3.

Tags: drop down / select list

Dynamically Populating A Listbox From A Textbox Via JavaScript / DOM

Doug Vanderweide — Tue, 16 Jan 2007 00:22:48 +0000

Recently asked on Yahoo! Answers:

Where can I find the javascript that lets me move an item from a textbox to a list?

I have a text field, an ADD button, a list feld (empty) and a DELETE button. I want the user to be able to type something into the textfield, click ADD, and have that item appear in the list. If they select an item from the list and click DELETE, then the item would be deleted. Can someone post the code or a link to some free javascript?

You can actually find bits and pieces of this code out on the Interweb (as one of my clients calls it) quite easily, but packaged together isn’t so easy. So, I’ll tie it all together and explain how it works.

As always, we start with a simple form, and again, I’m cheating on layout with a table. Note that we assign onclick events to our buttons that will be the names of our JavaScript functions:





				Enter Item:

We begin the JavaScript with a function that doesn’t seem related at all: A basic string-trimming function. What this function does is trim all leading and trailing white space from a line. We use this function because we don’t want to handle bad text input from the user, and that includes simply entering nothing more than white space into the textbox.

Our function merely starts at the beginning of the input string and looks for whitespace characters, removing them if they are found. Then, it finds the end of the string and starts knocking white space characters off the end, one by one.

function trimString(input) {
	var output = input;
	while (output.substring(0, 1) == ' ') {
		output = output.substring(1, output.length);
	}
	while (output.substring(output.length - 1, output.length) == ' ') {
		output = output.substring(0, output.length - 1);
	}
	return output;
}

We can now begin the project in earnest. First up, the function that will add items to our listbox. We assign two variables the textbox and listbox elements from our page; we declare a Boolean that will help us figure out if the textbox contains a value that’s already in our list; and we declare an Option variable that will allow us to add items to the listbox.

function addListItem() {
	var textbox = document.getElementById('mytextbox');
	var listbox = document.getElementById('mylistbox');
	var inList = false;
	var myText = trimString(textbox.value);
	var myOption;

Notice that we trimmed the myText variable before we began; we want to make sure there is something worth processing. Additionally, we want to make sure that we don’t add list items based on leading or trailing spaces. For example, to humans, “Hello World!” is the same as “Hello World! “, but to a computer, that trailing space makes the two strings different.

The code below takes that trimmed text and compares it to all the options currently in the listbox. If the item is already in the options, the value of the text box will not be added.

We need to consider case, as well. In the code block below, I cast both the value of the textbox and the values in the listbox to lower case as I compare them, because I don’t want options in the listbox that repeat an item based on case.

For example, if I don’t cast my comparisons to lower case, then “Banana”, “banana”, “bAnana” and “BaNana” would all be added to the list box as options. If that’s what you actually want to have happen, just remove the toLowerCase() methods from the code block below.

To add an option to a listbox, we just create an option with the text and value we want, then append it to the end of the options list.

if(myText != '') {
	for(var i = 0; i < listbox.options.length; i++) {
		if(myText.toLowerCase() == listbox.options[i].text.toLowerCase()) {
			inList = true;
			break;
		}
	}

	if(!inList) {
		myOption = new Option(myText, myText);
		listbox.options[listbox.options.length] = myOption;
	}
}

[Aside: You could have this list automatically sort itself alphabetically. To do that, you'd declare a global array and store your options in that array; every time you added an option, you'd add the item to that global array, then sort it.

In turn, you'd remove all options from the listbox as it is now, then rebind all the items in the global array to your listbox as options.]

To remove an item, we simply see if it is checked in the listbox; if it is, we set it to null.

function removeListItem() {
	var listbox = document.getElementById('mylistbox');

	for(var i = 0; i < listbox.options.length; i++) {
		if(listbox.options[i].selected) {
			listbox.options[i] = null;
		}
	}
}

Here's a working demo:

http://www.dougv.com/demo/js_dynamic_listbox/

You can simply save the page as is to work with it. As always, I distribute code under the most recent version of the Creative Commons Attribution / Share-Alike License.

Tags: drop down / select list

dougv.com « Doug Vanderweide » drop down / select list

Working With The authorize.net Server Integration Method (SIM) Payment Gateway, Part 1: Don’t Use JavaScript

JavaScript Is Wildly Insecure

Always Process Orders Server-Side

Any Form Variable Can Be Poisoned By DOM Manipulation

Related Posts

Parent-Child DropDownList Controls In ASP.NET Web Forms (VB.NET)

Example 1: Using SqlDataSource Controls

Example 1B: A Little Code Behind To Clean Things Up

Example 2: Using Code Behind And CompareValidator Controls

Related Posts

binding a data from database to dropdownlist based on selected item of another dropdown list

Related Posts

Parent – Child Select Lists Revisited: Multiple Parent – Child Select Lists Via PHP, MySQL And jQuery

Overview Of The Approach

HTML Modifications

The bindList() Function

The clearChildLists() Function

Building The Query String

The PHP Helper Page

The Remaining JavaScript Functions

Related Posts

Parent – Child Select Lists Revisited: Validating Selected Options Via jQuery And PHP

jQuery Form Validation

The JavaScript Functions

PHP Validation

Related Posts

Using AJAX To Data Bind A Child Drop Down List Based On The Selected Option Of A Parent Select Control

Before We Start: You Need Relational Data

Step 1: Get jQuery

Step 2: Create The Select Lists

Step 3: The citylist.php “Helper” Script

Step 4: The bindCity() JavaScript Function

Two Quick Postscripts

Related Posts

Moving ListItems From A ComboBox / DropDownList To A ListBox In .NET

The Power Of Object-Oriented Code

Step 1: The ComboBox And ListBox Controls

Step 2: The Code

Related Posts

Revisited: Adding Non-Selectable ListItem Controls To An ASP.NET DataBound List Control

Example 1: The Basics

Example 2: Periodic Separators In A DataBound Control

Example 3: With A CustomValidator Control

Related Posts

A Simple YouTube Jukebox Using JavaScript / DOM And deconcept’s SWFObject

Step 1: The Form

Step 2: The DIV

Step 3: deconcept’s SWFObject JavaScript

Step 4: The playVideo() Script

Related Posts

Dynamically Populating A Listbox From A Textbox Via JavaScript / DOM

Related Posts