Posted on by

Commas and other punctuation in selector labels

In this post, I document a feature that you can take advantage of when defining labels for selectors like radio buttons, dropdowns and checkboxes. Each of the selections you define can have a separate value and title, which is the printed value the user sees. The “value” is what is actually stored in the database.

In the simplest case, you would just define your choices as a comma-separated list:

Screen Shot 2013-12-20 at 4.51.35 PM

But let’s say internally, these cities are represented by a code, which is what you want to store in the database. You don’t expect the user to know these codes, so they need to see the name. You would do that like this, using the double colon to create a title::value pair:

<a href="http://xnau.com/commas-and-other-punctuation-in-selector-labels/screen-shot-2013-12-20-at-4-52-00-pm/" rel="attachment wp-att-909"><img class="aligncenter size-medium wp-image-909" alt="Screen Shot 2013-12-20 at 4.52.00 PM" src="http://xnau.com/webdesign/wp-content/uploads/2013/12/Screen-Shot-2013-12-20-at-4.52.00-PM-300x57.png" width="300" height="57" /></a><br />

Great, but Washington is usually written “Washington, D.C.” and you’d like it to be presented that way. If you try that in the values list for the field, it won’t work right because the plugin will detect the comma and parse “D.C.” as a separate item.

Screen Shot 2013-12-20 at 5.02.16 PM

The way around that lies in the fact that the title is just a displayed string on the web page…so in that context you can use an HTML entity, and it will display the comma without tripping up the parser.

<a href="http://xnau.com/commas-and-other-punctuation-in-selector-labels/screen-shot-2013-12-20-at-4-52-36-pm/" rel="attachment wp-att-908"><img class="aligncenter size-medium wp-image-908" alt="Screen Shot 2013-12-20 at 4.52.36 PM" src="http://xnau.com/webdesign/wp-content/uploads/2013/12/Screen-Shot-2013-12-20-at-4.52.36-PM-300x56.png" width="300" height="56" /></a><br />

It works!

Screen Shot 2013-12-20 at 5.04.35 PM

Leave a Reply
You have to agree to the comment policy.

Leave a Reply
You have to agree to the comment policy.