Selecting a radio button using JQuery

Events happening in the community are now at Drupal community events on www.drupal.org.
drob's picture

Help appreciated -

I'm building a node form where the form will reveal/hide portions depending on the users choices. To do this I'm using jQuery to manipulate the DOM. I'm having a lot of issues with the radio buttons.

What I want to do is have a message pop up if the user selects a particular radio button (in this case a "no" choice of a "Yes/No" "set"). For this to work I need to attach an "onClick" handle to the "no" radio button and when the user clicks evaluate and display the message. Because of a series of interrelated issues I've tried a number of approaches. The one I'm working on now is:

  • I'm using the form APIs "radios" - an issue here is that "radios" define the actual radio buttons in an array and it doesn't look like there is a way to assign an id attribute using the forms api (as a matter of fact there is code in form.inc which explicitly strips out an ID at that level).
  • I assign an onClick handler to the "radios" - #attributes' => array('onClick' => 'CitizenClick()')
  • On form load I assign an id to the specific radio button I'm interested in - $("[name=CitizenQ][value=no]").attr('id', 'CitizenNoButton');
  • In CitizenClick() I check and take action depending - if ( $("#CitizenNoButton").attr('checked') ) {
  • Please note that although I could do all this without an "id" and by selecting the "name" instead of the "id" - it was very slow

Everything works - EXCEPT -

I am placing the radio buttons inside of a fieldset thusly -

$form['Qualifyers'] = array(
    '#type' => 'fieldset',
    '#tree' => TRUE,
    '#weight' => 1,
);
$form['Qualifyers']['CitizenQ'] = array(
    '#type' => 'radios',
    '#title' => t('Are you a U.S. Citizen?'),
    '#default_value' => 1,
    '#options' => array('yes' => t('Yes'), 'no' => t('No')),
    '#attributes' => array('onClick' => 'CitizenClick()'),
);

If I don't place it within the fieldset I can select the radio with -

$("[name=CitizenQ][value=no]")

However withing the fieldset I can't get this to work -

$("[name=Qualifyers[CitizenQ]][value=no]")

I assumed the above wouldn't work because the "[]" are special characters so I tried escaping them -

$("[name=Qualifyers\[CitizenQ\]][value=no]")

Still no joy - I have been beating my head against this for a while and would appreciate some assistance - also if I've approached this in a fundamentally wrong way please let me know.

Thanks!

Comments

Try selecting using id

recidive's picture

Try selecting using id instead.

$('#edit-Qualifyers-CitizenQ[value=no]')

Using quotes on attribute values should work too, see jQuery attribute selectors documentation. So:

$("input[name='Qualifyers[CitizenQ]'][value=no]")

yeah baby!

drob's picture

Recidive,

Thanks a bunch! - the quotes worked like a charm - I missed the doco (although I was looking around for it) - I liked the note there "Quotes are optional in most cases, but should be used to avoid conflicts when the value contains characters like "]"." Duhhhh....

In terms of using an ID - I'm doing this so I can specify an ID - it doesn't exit yet :).

Cheers,

Dan

Javascript

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week