Author Topic: custom field id's when rendered in a form (Read 2246 times)

lcdweb · July 30, 2010, 09:16:33 am

just ran into an issue --
I wanted to create some conditional elements on a form -- IF checkbox is checked, THEN display a second field.
so my Civi profile included all the fields, and I was just using javascript to show/hide the containing div for the second field. so far so good.

to do that, I'm heavily use the js document.getElementById to retrieve my conditions, etc. The problem I ran into is that all the custom fields render with an id that has an array-type structure. For example, I might see:

Code: [Select]

id="custom_1[name of field]"
The problem is that per html4 specs, the id value should not have brackets (http://www.w3.org/TR/html4/types.html#h-6.2). Looks like that restriction is removed in html5 (http://www.w3.org/TR/html5/elements.html#the-id-attribute), though it does say the value shouldn't have spaces (which many of these do).

FF/IE8/Chrome all play nice with the value anyway. But IE7 crashes and burns (or just ignores you). there are all kinds of issues with getElementsByName in IE7, so that's not a viable alternative option.

I don't think that the id really needs to be passed the label of the field. I can't think of a reason why it would need anything more than the actual field name (e.g. custom_2). Unless those are used for option value processing?

kylejaster · July 30, 2010, 09:26:17 am

this is a definite bug in the code - we should be generating valid ID's and classes (I've also run into it)...

kylejaster · July 30, 2010, 09:42:21 am

The workarounds I've used are:

1) use jquery, which covers up a lot of this nonsense.
2) find other combinations of selectors that will identify this item (like .fieldset-name>input[type=checkbox] and other crazy stuff)
3) combination of 1 and 2 and overriding theme template to help out

Dave Greenberg · August 02, 2010, 03:47:25 pm

Brian - what version and what form(s) are you seeing the array-formatted id's. Just did some snooping on my 3.2 local install. In a profile, I get id's like this:

<select class="form-select" id="custom_2" name="custom_2">
   <option value="">- select -</option>
   <option value="S">Single</option>
   <option value="M">Married</option>
   <option value="D">Domestic Partner</option>
   <option value="W">Widowed</option>
   <option value="O">Other</option>
</select>

... and in the contact edit form, custom fields have an additional -N which I think covers multiple instances/blocks:

<input type="text" class="form-text ac_input" id="custom_9_-1" name="custom_9_-1" autocomplete="off">

lcdweb · August 02, 2010, 05:41:57 pm

Dave,
It only happens with checkbox fields. Should have clarified that.
In my case it's an event reg form with a profile included.

I chatted with Lobo on IRC about it a couple days ago. He had some ideas, though we played with a couple patches that didn't quite work.
-B

mathieu · September 30, 2010, 11:56:04 am

I also ran into this issue when including checkboxes in a CiviContribute form (CiviCRM 3.2).

<label>Subscribe to the following newsletter topics</label>
[...]
<input name="custom_3[1]" value="" type="hidden">
<input id="custom_3[1]" name="custom_3[1]" value="1" checked="checked" class="form-checkbox" type="checkbox">
[...]
<input name="custom_3[2]" value="" type="hidden">
<input id="custom_3[2]" name="custom_3[2]" value="1" class="form-checkbox" type="checkbox">
[...]

I wanted to add conditions to disable some of the checkboxes in certain situations, using jQuery, but doing "$('#custom_3[2]').val()" doesn't work because it's not a valid ID.

CiviCRM Community Forums (archive)

News:

Author Topic: custom field id's when rendered in a form (Read 2246 times)

lcdweb

custom field id's when rendered in a form

kylejaster

Re: custom field id's when rendered in a form

kylejaster

Re: custom field id's when rendered in a form

Dave Greenberg

Re: custom field id's when rendered in a form

lcdweb

Re: custom field id's when rendered in a form

mathieu

Re: custom field id's when rendered in a form