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:

Screen Shot 2013-12-20 at 4.52.00 PM

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.

Screen Shot 2013-12-20 at 4.52.36 PM

It works!

Screen Shot 2013-12-20 at 5.04.35 PM

10 thoughts on “Commas and other punctuation in selector labels

  1. Hi folks, as I tried out some possibilities, I found out about this one: If you wish to just give out some text in the pdb_result and pdb_list, just use the field radio button WITHOUT giving it any values, but type in your text/message as help text! Result: Plain help text without radio button, textfield or any other bullying stuff!!!
    Wow.

    1. Thanks for the tip! I didn’t know this would work.

  2. Hi, thanxs for this great plugin and for your quick reaction here! I am thinking about using colors to choose from, perhaps in combination with text. Would this be possible in any way as a radio button? Its supposed to be like a category color scheme. Thanks in advance!

    1. Yes, this is possible, you’ll need to have some knowledge of the CSS to use to get the effect you want, but it is possible to set a different color for each selection. The plugin has a place to put special CSS rules like that.

      1. Great! I do have knowledge of CSS, so can you give me a hint or a line of code, how to do this? Like: “Bar/Restaurant” should appear with red background as a radio button, next radio button should be orange, saying “Cafe”, both in the same field. Thanks in advance!!!

        1. With CSS, you need to use a selector that will target the specific element you want to color. I can’t give you the code to use, it will be specific to your situation. Typically, with a radio button, you would be setting the background color of the “label” element that wraps both the button itself and the label text. Each label has a “for” attribute which you can use to target the specific selector…for example:

          label[for=pdb-participant-team] {
              background-color: red;
          }

          You have to inspect the HTML source to see what it should be in your case.

        2. Thanks a lot! It worked for me and it looks great! I even have been able to change the font color on this labels!
          Now I go for the Multiple Databases…

          Just to let you know: with my Moz-Browser (didn’t test amy other), the whole comment-field is shown twice on each page…

  3. Hi Roland, the pictures are missing here!

    1. Thanks, I fixed it.

  4. I agree the comment policy

Leave a Reply to lureki Cancel reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

10 thoughts on “Commas and other punctuation in selector labels

  1. Hi folks, as I tried out some possibilities, I found out about this one: If you wish to just give out some text in the pdb_result and pdb_list, just use the field radio button WITHOUT giving it any values, but type in your text/message as help text! Result: Plain help text without radio button, textfield or any other bullying stuff!!!
    Wow.

    1. Thanks for the tip! I didn’t know this would work.

  2. Hi, thanxs for this great plugin and for your quick reaction here! I am thinking about using colors to choose from, perhaps in combination with text. Would this be possible in any way as a radio button? Its supposed to be like a category color scheme. Thanks in advance!

    1. Yes, this is possible, you’ll need to have some knowledge of the CSS to use to get the effect you want, but it is possible to set a different color for each selection. The plugin has a place to put special CSS rules like that.

      1. Great! I do have knowledge of CSS, so can you give me a hint or a line of code, how to do this? Like: “Bar/Restaurant” should appear with red background as a radio button, next radio button should be orange, saying “Cafe”, both in the same field. Thanks in advance!!!

        1. With CSS, you need to use a selector that will target the specific element you want to color. I can’t give you the code to use, it will be specific to your situation. Typically, with a radio button, you would be setting the background color of the “label” element that wraps both the button itself and the label text. Each label has a “for” attribute which you can use to target the specific selector…for example:

          label[for=pdb-participant-team] {
              background-color: red;
          }

          You have to inspect the HTML source to see what it should be in your case.

        2. Thanks a lot! It worked for me and it looks great! I even have been able to change the font color on this labels!
          Now I go for the Multiple Databases…

          Just to let you know: with my Moz-Browser (didn’t test amy other), the whole comment-field is shown twice on each page…

  3. Hi Roland, the pictures are missing here!

    1. Thanks, I fixed it.

  4. I agree the comment policy

Leave a Reply to lureki Cancel reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.