Using Spry to Auto-select a Form Value

Posted at March 1, 2007

So far I’ve covered how to use multi-related selects in Spry and how to dynamically update the select list upon a database update. That’s good enough for a simple ‘add record’ form but when it comes to an editing an existing record I want to be able to have the saved column’s value automatically selected in its select box.

Adobe’s samples didn’t seem to cover this scenario so it became a matter of trial and error, and a lot of wading through documentation. In the end, however, it turned out to be a matter of changing only a few lines of code.

First, let’s revisit my previous select code:

<SELECT spry:repeatchildren="dsBrands" name="brandID"
onchange="document.forms[0].subbrandselect.disabled = true;
dsBrands.setCurrentRowNumber(this.selectedIndex);">
	<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" value="{brandID}" selected="selected">{brandNAME}</option>
	<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}" value="{brandID}">{brandNAME}</option>
</SELECT>

The portion we need to look at in particular is in red. ds_RowNumber reflects the position of the row currently being evaluated. ds_CurrentRowNumber is the row number of the “current row” of the data set. This works if I don’t need a specific value to be selected, but it does absolutely nothing for me if I want the saved value to be selected in the list when editing.

What I need is a way to check whether a brandID in the dsBrands dataset is equal to the brand ID of the record I’m editing. So, the first thing I need to know is how to refer to the value of the dataset’s current brand_id. This is done by enclosing the column name in single quotes, like this: ‘{brandID}’.

Now I can compare that value to the brand ID of the record I’m editing. For example, if the query object of the current record that I’m editing is named qEditProduct and the column that holds the brand id in qEditProduct is called brand_id, I would refer to it like this: #qEditProduct.brand_id# .

Compare one to the other and I have my new SELECT definition:

<SELECT spry:repeatchildren="dsBrands" name="brandID"
onchange="document.forms[0].subbrandselect.disabled = true;
dsBrands.setCurrentRowNumber(this.selectedIndex);">
	<option spry:if="'{brandID}' == <cfoutput>#qEditProduct.brand_id#</cfoutput>" value="{brandID}" selected="selected">{brandNAME}</option>
	<option spry:if="'{brandID}' != <cfoutput>#qEditProduct.brand_id#</cfoutput>" value="{brandID}">{brandNAME}</option>
</SELECT>

Now, if the value of brand ID in my select matches the value of the brand ID in the record I’m editing it will be pre-selected in the list.

To take this a step further, my original example was on multi-related selects, meaning I had subbrand select that was related to the value in the brand select. That being the case, I first have to make the same change to the subbrand select definition resulting in the following code:

<SELECT spry:repeatchildren="dsSubbrands" name="subbrandselect" >
	<option spry:if="'{brandID}' == <cfoutput>#qEditProduct.brand_id#</cfoutput>" value="{subbrandNAME}" selected="selected">{subbrandNAME}</option>
	<option spry:if="'{brandID}' == <cfoutput>#qEditProduct.brand_id#</cfoutput>" value="{subbrandNAME}">{subbrandNAME}</option>
</SELECT>

Then, I also need to modify my dataset definition. Initially, dsSubbrands definition was based on the value of the brand select. The subbrands changed when the brand changed. If we’re editing, however, we want our subbrand to depend on the value stored in the current record rather than being related to the brand select. My original dsSubbrands dataset definition looked like this:

var dsSubbrands = new Spry.Data.XMLDataSet("subbrands.cfm?brandID={dsBrands::brandID}","subbrands/subbrand");

{dsBrands::brandID} is my reference to the selected item in the brands select. I need to change that so it now refers to the current record in my qEditProduct query:

var dsSubbrands = new Spry.Data.XMLDataSet("subbrands.cfm?brandID=<cfoutput>#qEditProduct.brand_id#</cfoutput>","subbrands/subbrand");

Now when I edit a record, the record values will be pre-selected in both the brand and subbrand dropdown. You can use the original code for ‘add record’ forms or, for more condensed code, combine them both into a conditional check based on whether the user is adding or editing a record.

-rG

ajax, coldFusion, spry

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

4 Responses to “Using Spry to Auto-select a Form Value”

Leave Comment

(required)

(required)