Issues with selecting radio buttons with JQuery
Folks, 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! Dan
Dan Robinson wrote:
Folks,
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.
I would recommend setting up a #process so that you can use your own version of expand_radios() -- this will let you set things like the #name and #id of each individual radio option individually. That could allow you to much more easily deal with some of this oddness.
Hey Dan, On Tue, Jul 22, 2008 at 4:56 AM, Earl Miles <merlin@logrus.com> wrote:
I would recommend setting up a #process so that you can use your own version of expand_radios() -- this will let you set things like the #name and #id of each individual radio option individually. That could allow you to much more easily deal with some of this oddness.
For some examples of a custom #process callback, see the D6 version of the Category module <http://drupal.org/project/category> (currently in Alpha). The category_menu sub-module has two custom overrides of expand_checkboxes(), which are there to add some jQuery to each box in a set of checkboxes (not _exactly_ the same as radios, but pretty close). Cheers, Jaza.
please add your review and support to http://drupal.org/node/215301. You might learn something helpful from og_access.js in HEAD which does some radio button trickery. for example, $("input[@name='og_visibility']:nth(1)").removeAttr('disabled'); On Mon, Jul 21, 2008 at 2:29 PM, Dan Robinson <dan@drob.org> wrote:
Folks,
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!
Dan
This should do the trick: $("input[name='Qualifyers[CitizenQ]'][value=no]") henrique 2008/7/21 Moshe Weitzman <weitzman@tejasa.com>:
please add your review and support to http://drupal.org/node/215301. You might learn something helpful from og_access.js in HEAD which does some radio button trickery. for example,
$("input[@name='og_visibility']:nth(1)").removeAttr('disabled');
On Mon, Jul 21, 2008 at 2:29 PM, Dan Robinson <dan@drob.org> wrote:
Folks,
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!
Dan
Thanks everyone! - answering all in one to save bits. Earl -
I would recommend setting up a #process so that you can use your own version of expand_radios() -- this will let you set things like the #name and #id of each individual radio option individually. That could allow you to much more easily deal with some of this oddness.
Interesting - I'm not sure I completely understand how this works - but I will study up. Moshe -
please add your review and support to http://drupal.org/node/215301. You might learn something helpful from og_access.js in HEAD which does some radio button trickery. for example,
$("input[@name='og_visibility']:nth(1)").removeAttr('disabled'); I would like to help here - I actually looked through this yesterday but couldn't get the patch to work on D6 - so headed in another direction. I'm not working on D7 right now so I'm not sure how to review it - if a patch for D6 appears I could jump on that.
Henrique -
This should do the trick:
$("input[name='Qualifyers[CitizenQ]'][value=no]")
henrique
yeah baby! - that worked - not sure why the escape didn't - but maybe I'll figure that out later - thanks! Dan
Folks,
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:
Dan Robinson wrote:
Thanks everyone! - answering all in one to save bits.
Earl -
I would recommend setting up a #process so that you can use your own version of expand_radios() -- this will let you set things like the #name and #id of each individual radio option individually. That could allow you to much more easily deal with some of this oddness.
Interesting - I'm not sure I completely understand how this works - but I will study up.
While it may be moot as your problem was solved by Henrique, the way checkboxes and radios work is that they automatically have a #process function which expands the checkboxes into multiple form widgets. See: http://api.drupal.org/?q=api/function/expand_radios/head You can do this (at least in D6): '#process' => array('mymodule_expand_radios'), This will override the default #process and call your version of the function instead.
participants (5)
-
Dan Robinson -
Earl Miles -
Henrique Recidive -
Jeremy Epstein -
Moshe Weitzman