I would probably tackle the problem like this:
<script type='text/javascript'>
Event.observe(window, 'load', function () {
function toggleForm () {
$('toShow')[ $('radios').select('input[type=radio]
[value=yes]').pluck('checked').any() ? 'show' : 'hide' ]();
}
$('radios').observe('click', toggleForm);
toggleForm();
});
</script>
<form>
<table>
<tbody id='radios'>
<tr>
<td><input type='RADIO' name='option1' value='yes' /
>Yes</td>
<td><input type='RADIO' name='option1' value='no' /
>No</td>
</tr>
<tr>
<td><input type='RADIO' name='option2' value='yes' /
>Yes</td>
<td><input type='RADIO' name='option2' value='no' /
>No</td>
</tr>
<tr>
<td><input type='RADIO' name='option3' value='yes' /
>Yes</td>
<td><input type='RADIO' name='option3' value='no' /
>No</td>
</tr>
</tbody>
</table>
</form>
On Jan 30, 8:08 am, kodiacat <[EMAIL PROTECTED]> wrote:
> I am not a Ruby user, but I was hoping that maybe you guys could help
> me with the some Javascript. I am using Prototype and Scriptaculous.
> First off this is what I am trying to do: I have a table based form
> A that has 6 yes/no questions using radio buttons. I have put these
> questions in a separate <tbody> because using a div doesn't work for
> tables. If a user selects yes to any of these questions I would like
> for Form B to automatically appear below these questions. Sounds
> simple, but I am having some trouble.
>
> Here's is where I am at:
> I added id's to all of the radio buttons.
> Then I created an external js file, and then am calling it at the end
> of my page.
> In this external js file I have the following:
>
> [
> <script type="text/javascript" language="javascript">
>
> var checkConflict = function checkConflict(){
> $('test').toggle();
>
> }
>
> Event.observe(window,'load',function()
> {
> Event.observe('element1', 'click', function(){ checkConflict();
> });
> Event.observe('element2', 'click', function(){ checkConflict();
> });
> Event.observe('element3', 'click', function(){ checkConflict();
> });
> Event.observe('element4', 'click', function(){ checkConflict();
> });
> Event.observe('element5', 'click', function(){ checkConflict();
> });
> Event.observe('element6', 'click', function(){ checkConflict();
> });
>
> });
>
> </script>
> ]
> So far so good, this works to show the questions whenever they click
> yes. However I have two problems:
>
> 1. One is in firefox 2.0.0.11 I am getting this error:
> "Element referenced by ID/NAME in the global scope. Use W3C standard
> document.getElementById() instead. undefined...
>
> 2. The second problem I have is that if they select yes a
> second time it hides the questions.
>
> I seem to be having a logic problem. It has been suggested that I used
> element.observe, element.toggle, and also bind. But I don't really
> know how to do this.
> I have searched everywhere trying to find a relevant example, and so
> far I have turned up nothing.
>
> So if anyone has any ideas or can help it would be greatly
> appreciated. I apologize if this doesn't make sense. Please let me
> know if I have made a mistake somewhere, or if you need more info. I
> would post a link for you, but I am working on a private server, so I
> can't do that, but if you need something clarified please let me
> know. Thank you in advance.
> ~Becca
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
