# Hide/unhide using prototype

**URL:** <https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811>\
**Category:** Rails\
**Created:** [January 21, 2007, 9:59am UTC](https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811 "2007-01-21T09:59:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jdejong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/a9a28c/32.png) [@jdejong](https://www.ruby-forum.com/u/jdejong)\
**Post date:** [January 21, 2007, 9:59am UTC](https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811/1 "2007-01-21T09:59:02Z")

</div>

I’m sorry if this is a stupid question but I’m totally swamped.

I have a view where I have 2 radio\_buttons with corresponding selection  
box below each.

Initially I want the user only to see the two radio\_buttons next to the  
google map I’m showing. When the user selects one of the radio\_buttons  
the corresponding select box is shown.

This must all happen without the action having to go to the controller.

Both select boxes however as shown when the page loads and in IE6 I get  
an error mesg “Form is undefined”

Can I even do what I want to accomplish? Sorry that is what happens when  
a mainframe programmer starts playing around programming for the web, he  
gets very very lost

note:  
The ID names I use in the code below I got from viewing the source after  
attempting various other variations. I even gave the radio\_buttons and  
select boxes ID names. But that did not work either.

Thanks for your time.

Here is the code in my view:

\<%= GMap.header -%\>  
\<%= render :partial =\> ‘garage’, :collection =\> @garages %\>  
\<% form\_for :garage\_map, :url =\> { :action =\> :index } do |f| %\>

 Show on the Map 

\<%= f.radio\_button :filter, :garage %\>A specific garage

\<%= f.collection\_select(:name, @garages, :id, :name) %\>

\<%= f.radio\_button :filter, :make %\>All garages for a make of car

\<%= f.select(:car\_make, garage::CAR\_MAKES) %\>

\<%= submit\_tag "Show Selection", :class =\> "submit" %\>

\<% end %\>

\<%= observe\_field :garage\_map\_filter\_garage,  
:frequency =\> 0,  
:before =\> “Element.hide(‘garage\_map\_name’)”,  
:complete =\> “Element.show(‘garage\_map\_name’)” %\>

\<%= observe\_field :garage\_map\_filter\_make,  
:frequency =\> 0,  
:before =\> “Element.hide(‘garage\_map\_car\_make’)”,  
:complete =\> “Element.show(‘garage\_map\_car\_make’)” %\>

\<%= @map.to\_html %\>

My applogies if you saw this post over at railsforum as well but I’m  
desperate !

---

<div class="post-metadata">

**Author:** ![jdejong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/a9a28c/32.png) [@jdejong](https://www.ruby-forum.com/u/jdejong)\
**Post date:** [January 21, 2007, 10:01am UTC](https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811/2 "2007-01-21T10:01:32Z")

</div>

Johannes De jong wrote:

> I’m sorry if this is a stupid question but I’m totally swamped.

Off course I stumped and not swamped 🙂

---

<div class="post-metadata">

**Author:** ![jdejong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/a9a28c/32.png) [@jdejong](https://www.ruby-forum.com/u/jdejong)\
**Post date:** [January 23, 2007, 5:17am UTC](https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811/3 "2007-01-23T05:17:51Z")

</div>

Hi Dan thanks for taking the time to reply. But with the help from Ryan  
over at Railsforum I managed to solve my problem.

I was barking up the wrong tree, using Element.hide() en Element.show()  
solved my problem.

---

<div class="post-metadata">

**Author:** ![jdejong](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/a9a28c/32.png) [@jdejong](https://www.ruby-forum.com/u/jdejong)\
**Post date:** [January 22, 2007, 7:11pm UTC](https://www.ruby-forum.com/t/hide-unhide-using-prototype/82811/4 "2007-01-22T19:11:22Z")

</div>

I think it’s the radio button u.i. paradigm that makes this difficult  
with or without Rails.

For example:

If you click a radio button form element twice it should stay selected,  
and it’s exclusive representation (specific garages) is maintained  
within the mutual radio button group (by garage or by make).

If you had an image with link\_to\_remote the image could be toggled with  
each click, such as a triangle pointing to the right or down or a faux  
radio button. With this implementation you could still maintain the  
mutual exclusion with multiple calls to multiple elements at once (show  
one and hide the other) while also allowing for none to be in a selected  
state.

Perhaps if there’s a working radio button example somewhere to base on  
it would be easier to say how it can be done in Rails.

If you can avoid using radio buttons though I think it’ll be much  
easier.

Dan P.