# Interacting select\_tags using onchange

**URL:** <https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886>\
**Category:** Rails\
**Created:** [September 18, 2008, 12:46am UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886 "2008-09-18T00:46:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [September 18, 2008, 12:46am UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/1 "2008-09-18T00:46:43Z")

</div>

my view:

 \<%= render :partial =\> "event\_category\_select" %\> 
  

 \<%= render :partial =\> "event\_category\_text\_field" %\> 

 \<%= render :partial =\> "event\_description\_select" %\> 
  

 \<%= render :partial =\> "event\_description\_text\_field" %\> 

\_event\_category\_select.html.erb:  
\<%= select\_tag :select\_category, options\_for\_select(@categories,  
selected = @selected\_category),  
{:onchange =\> remote\_function(:url =\> {:action  
=\> :select\_category}, :with =\> “select\_category”)} %\>

\_event\_category\_text\_field.html.erb:  
\<%= text\_field\_tag :category, @selected\_category, :size =\> 30 %\>

\_event\_description\_select.html.erb:  
\<%= select\_tag :select\_description, options\_for\_select(@descriptions,  
selected = @selected\_description),  
{:onchange =\> remote\_function(:url =\> {:action  
=\> :select\_description}, :with =\> “select\_description”)} %\>

\_event\_description\_text\_field.html.erb:  
\<%= text\_field\_tag :description, @selected\_description, :size =\> 60 %\>

controller:

def select\_category  
@selected\_category = params[:value]  
search\_hash = {:select =\> “DISTINCT description”}  
search\_hash[:conditions] = [“category = ?”, @selected\_category] if  
@selected\_category != “”  
@descriptions = ["", \*Event.find(:all,  
search\_hash).map(&:description)]  
@selected\_description = “”  
render :update do |page|  
page.replace\_html “event\_category\_text\_field”, :partial =\>  
“event\_category\_text\_field”  
page.replace\_html “event\_description\_select”, :partial =\>  
“event\_description\_select”  
end  
end

def select\_description  
@selected\_description = params[:value]  
@categories = ["", \*Event.find(:all, :select =\> “DISTINCT  
category”).map(&:category)]  
if @selected\_description != “”  
selected\_event = Event.find(:first, :conditions =\> [“description  
= ?”, @selected\_description])  
@selected\_category = selected\_event.category if selected\_event  
else  
@selected\_category = “”  
end  
render :update do |page|  
page.replace\_html “event\_category\_select”, :partial =\>  
“event\_category\_select”  
page.replace\_html “event\_description\_text\_field”, :partial =\>  
“event\_description\_text\_field”  
end  
end

With ie 7.0 everything’s fine, but with firefox 3.0:

When I select a category, the two ids are replaced. After that, I want  
to select a description, but it doesn’t send a request. However,  
selecting another category does. The same the other way round, i.e.  
when I begin with selecting a description.

The source code is of no avail, because with both browsers it never  
changes whatever I select.

Any idea?

Thanks  
Luma

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 16, 2008, 6:21pm UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/2 "2008-10-16T18:21:34Z")

</div>

Hey, do you solved your problem or found a work-around?

If so I’m interested in it because I do have a similar problem.

Thanks.  
Flo.

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 17, 2008, 7:33pm UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/3 "2008-10-17T19:33:53Z")

</div>

sorry, I still didn’t find a solution. I don’t have much experience  
with javascript.  
Luma

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 22, 2008, 8:59am UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/4 "2008-10-22T08:59:30Z")

</div>

From what I can see, the most likely cause of this is that there is an  
issue with the dom, such that when you do the update, the browser is  
not seeing the fields or ids correctly

A couple of suggstions:

Use firebug to carefully inspect the dom before and after the updates  
and make sure the ids are ok and that the elements are structured  
correctly.

If you cannot see anything obvious, strip the view code down so that  
the only things being rendered are the actual select fields. Then you  
should be able to see why the onchange is not firing.

If you get it down to very simple/minimal example that still  
demonstrates a problem, post it here and i will see if i can repeat  
it.

Tonypm

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 22, 2008, 9:03am UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/5 "2008-10-22T09:03:37Z")

</div>

ps.

Looking again at the code, I suspect the problem may be that you are  
updating table cells. I think i have seen something similar with ff.  
In general, I tend to always update a whole row.

Tonypm

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 23, 2008, 2:33pm UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/6 "2008-10-23T14:33:32Z")

</div>

1. You don’t need the form tag if you are only updating by ajax.  
Html purists might argue the point!

2. You can use any element to update from a partial. For example,  
give the tr an id as in:

then in the controller, page.replace\_html :update\_me etc.....
1. Sometime I find it easier to include the 

2. You may find if you get rid of the form tags, that updating  
individual

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 23, 2008, 1:29pm UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/7 "2008-10-23T13:29:32Z")

</div>

Very nice tool, I didn’t know firebug.

I think I’ve found the reason of the problem: When you update fields  
of a form, they forget to which form\_tag they belong. (Why do we need  
a form\_tag for these select\_tags, as they are only used for setting  
other fields by onchange?)

Updating another partial containing the form\_tag doesn’t work, so  
you’ve got to update the whole form. But I didn’t find a way to update  
a table row: A

 can’t be between a and a element,  
and a form\_tag can’t be between and \<% end %\>

def select\_number  
@number = params[:value]  
index = [’’,‘1’,‘2’].index(@number) || 0  
@letter = [’’,‘a’,‘b’][index]  
render :update do |page|  
page.replace\_html “test”, :partial =\> “test”  
end  
end

def select\_letter  
@letter = params[:value]  
index = [’’,‘a’,‘b’].index(@letter) || 0  
@number = [’’,‘1’,‘2’][index]  
render :update do |page|  
page.replace\_html “test”, :partial =\> “test”  
end  
end

I also included a field ‘additional’ which will also be updated with  
the whole form. How can I keep the values of such fields?

Thanks,  
Luma

|
| |
| . A simple example:
 \<%= render :partial =\> 'test' %\> 

\_test.html.erb:

\<% form\_tag do %\>

 |
| number: \<%= select\_tag :select\_number, options\_for\_select(['','1','2'], selected = @number), {:onchange =\> remote\_function(:url =\> {:action =\> :select\_number}, :with =\> "select\_number")} %\> | letter: \<%= select\_tag :select\_letter, options\_for\_select(['','a','b'], selected = @letter), {:onchange =\> remote\_function(:url =\> {:action =\> :select\_letter}, :with =\> "select\_letter")} %\> | additional: \<%= text\_field\_tag :additional, @additional %\> |

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 23, 2008, 4:01pm UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/8 "2008-10-23T16:01:16Z")

</div>

Without the form\_tag, everything’s fine with IE 7.0. But with firefox  
3.0.3, I don’t even get a request. (javascript completely enabled)

 \<%= render :partial =\> 'test' %\> 

|
| |

\_test.html.erb:

```
<td>
  <%= select_tag :select_number, options_for_select(['','1','2'],

```

selected = params[:value]),  
{:onchange =\> remote\_function(:url =\> {:action  
=\> :select\_number}, :with =\> “select\_number”)} %\>  
  
  
selected: \<%= params[:value] %\>

def select\_number  
render :update do |page|  
page.replace\_html “test”, :partial =\> “test”  
end  
end

And using page.replace with in the partial leads to  
something like [http://railsforum.com/viewtopic.php?id=21678](http://railsforum.com/viewtopic.php?id=21678)

Luma

---

<div class="post-metadata">

**Author:** ![luma](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/l/d6d6ee/32.png) [@luma](https://www.ruby-forum.com/u/luma)\
**Post date:** [October 24, 2008, 11:56am UTC](https://www.ruby-forum.com/t/interacting-select-tags-using-onchange/148886/9 "2008-10-24T11:56:50Z")

</div>

You’re right, the problem was just :with =\> “select\_number”

Using :with =\> “‘value=’+value” works.

Thanks!