CRM-5160 Radio buttons for custom fields in Contribution forms do not have a css id or class

    Details

    • Type: Bug
    • Status: Done/Fixed
    • Priority: Trivial
    • Resolution: Fixed/Completed
    • Affects Version/s: 3.0
    • Fix Version/s: 3.2
    • Component/s: Core CiviCRM
    • Labels:
      None

      Description

      Radio buttons for custom fields in Contribution forms (and probably others) do not have a css id or even a class, making it next to impossible to target them with css selectors. What follows is a conversation about this that I have with Mr Lobo on IRC where we (he) came up with a solution - that needs to be implemented by someone!

      Basically, the idea is to use id = name.value to generate a uniqe ID for the elements.

      <mrfelton> hmm. In the contribution page form css, radio buttons have no class, and an id that changes every time the form is loaded!
      [04:58:22] <mrfelton> qf_[some-random-chars]
      [05:01:09] <dlobo> mrfelton: u should chat with kyle, he's cleaning that stuff up in 3.1
      [05:01:21] <dlobo> i think its random id's when we dont have a name attached to it
      [05:01:30] <dlobo> courtesy of QF
      [05:01:30] <mrfelton> it has a name
      [05:01:32] * pavan_ has joined #civicrm
      [05:01:33] <mrfelton> custom_i3
      [05:01:42] <dlobo> the group has a name
      [05:01:50] <dlobo> each element does not
      [05:01:51] <mrfelton> (when i inspect it with firebug I can see that name)
      [05:02:12] <dlobo> and the solution is maybe to derive the name from the group name
      [05:02:21] <mrfelton> no, the element has that name
      [05:02:28] <mrfelton> (custom_13
      [05:05:07] <dlobo> mrfelton: check
      [05:05:07] <dlobo> http://drupal.demo.civicrm.org/civicrm/contribute/transact?reset=1&actio...
      [05:05:25] <dlobo> the amount radio buttons
      [05:05:36] <dlobo> so for the id, we'll have to do something like
      [05:05:49] <dlobo> id = name.value (so amount.267) etc
      [05:05:53] <dlobo> that might work
      [05:06:04] <dlobo> since all of the radio buttons have the same id
      [05:06:16] <dlobo> same name i mean
      [05:06:25] <mrfelton> ah I see what you mean
      [05:06:53] <mrfelton> yeah, that should work the same for custom fields too then. name.value
      [05:07:08] * zzolo has quit ()
      [05:07:19] <mrfelton> although, isn't it possible to have whitespace in the value? so, the value would need cleaning up
      [05:07:56] * dgg has joined #civicrm
      [05:08:23] <dlobo> yeah, we'll use a munged name/value
      [05:08:34] <dlobo> and do alphanumeric only etc
      [05:12:54] <mrfelton> sounds like a plan
      [05:14:47] <dlobo> wanna file an issue, might require some QF hacks. if you can look for a patch even better
      [05:14:56] * jalama has joined #civicrm
      [05:15:19] <dlobo> two places where we set it: CRM/Core/Form/Renderer.php
      [05:16:36] <mrfelton> sure, I'll file it later on tonight. Goto to pop out now
      [05:17:00] <dlobo> HTML/QuickForm/element.php, function _generateID
      [05:17:03] <dlobo> chow

        Attachments

          Activity

          [CRM-5160] Radio buttons for custom fields in Contribution forms do not have a css id or class
          Tracy Smith added a comment -

          I just want to say that I have the exact same issue. I'm using jQuery to hide a set of radio fields based on a membership type selection. If I add additional radio fields to the form, then they get hidden as well as my only selector for the group was -section. This would be a welcomed fix. Unfortunately, I do not know enough about the infrastructure and quick forms to come up with a patch. I may just switch them to select fields for now until a patch is released.

          Tracy Smith added a comment -

          One alternative quick fix might be to add a CSS Selector field on the data entry form for radio boxes, and then modified the appropriate functions to pull the CSS selector field from the database if the form type is a radio box. This would at least let the administrator identify a selector for this group of fields. In fact, this might be handy for all fields to have an optional CSS selector. Similar to the drupal menu class module.

          Donald A. Lobo added a comment -

          This is definitely fixed in 3.2, we use this feature in webtests

          this might have been fixed in 3.1, i just forgot to close this issue

          Tracy Smith added a comment -

          That's awesome news, looking forward to the 3.2 stable release. For now, I have a decent workaround.

            People

            • Assignee:
              Donald A. Lobo
              Reporter:
              Tom Kirkpatrick

              Dates

              • Created:
                Updated:
                Resolved: