> Of course we can obfuscate it even more:
Heck, we should just encode it and slap it in an eval
> Oh my, I'm not sure I understand this
I apologize... I wasn't trying to confuse you, just write some compact
code that you could drop in.
Here is a more thoroughly documented version of the exact same thing:
<script type='text/javascript'>
// Attach an observer to the window
Event.observe(window, 'load', function () {
// Create a function inside this scope for toggling the form
function toggleForm () {
var areAnyYes =
// Grab the "#radios" TBODY element
$('radios')
// Using a CSS selector, get an array of all the
// input elements where the "value" attribute is "yes"
.select('input[type=radio][value=yes]')
// For each of the radio buttons found, pull the
// "checked" property
.pluck('checked')
// find out if any of those "checked" properties are true
.any();
// If we found any "yes" checkboxes that were checked,
// show the form
if ( areAnyYes )
$('toShow').show();
else
$('toShow').hide();
}
// Add an observer to the TBODY that will run the
// above toggleForm function. It will fire anytime someone
// clicks on one of the radio buttons inside of it
$('radios').observe('click', toggleForm);
// Run the toggleForm function to set
// the initial state of the form
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>
<div id='toShow'>
The form to show goes here
</div>
> Such as pluck, any, and select..?
Pluck is an iterator function that pulls a property from each value in
an array:
http://prototypejs.org/api/enumerable/pluck
any is another iterator that returns whether or not any of the values
in array return true:
http://prototypejs.org/api/enumerable/any
select is a Selector function. It returns an array of all the elements
that match the css selector. In this case, it is limited to all
descendants of "#radios":
http://prototypejs.org/api/element/select
> And Also Im not sure what the ? and colon are for
This is what is called a ternary operator. It is basically a short-
hand if/else statement. More info about it can be found here:
http://en.wikipedia.org/wiki/%3F:
Feel free to post again if you have more problems.
On Jan 30, 2:31 pm, kodiacat <[EMAIL PROTECTED]> wrote:
> Thank you for the response. Oh my, I'm not sure I understand this. I
> think that you are suggesting to place the radio buttons in a <tbody>
> also. This is good idea, I had been trying to go about it for each
> individual element...something like below... Which is probably a
> horrible way to do it....which explains why I haven't been able to
> figure this out(*blush). Your approach seems like it is a much better
> way, if I can just figure it out.. There seem to be several things
> there that I haven't used before... Such as pluck, any, and select..?
> And Also Im not sure what the ? and colon are for.... I apologize if I
> am not making much since, or if I ask a stupid question. My brain is a
> bit fuzzy at the moment, and....I'm a newbie.
> Thank you again.
> ~Becca~
>
> if (document.getElementsByName('element1').value == 'Yes')
> {
> $('form_B').show();}
>
> else (document.getElementsByName('element1').value == 'No')
> {
> $('form_B').hide();
>
> }
> }
>
> On Jan 30, 1:42 pm, Nycto <[EMAIL PROTECTED]> wrote:
>
> > 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
-~----------~----~----~----~------~----~------~--~---
