# How to use remote\_form\_tag?

**URL:** <https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003>\
**Category:** Rails\
**Created:** [September 23, 2009, 4:36pm UTC](https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003 "2009-09-23T16:36:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![oldbug](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/o/c0e974/32.png) [@oldbug](https://www.ruby-forum.com/u/oldbug)\
**Post date:** [September 23, 2009, 4:36pm UTC](https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003/1 "2009-09-23T16:36:38Z")

</div>

I have a partial that gets rendered in response to a #link\_to\_remote  
call. What I want to do is to display a select box, when the user  
selects an item from that box, display a second select box, when the  
user selects an item from that box, display a link (or possibly a  
submit button) allowing the user to do something.

Here is my partial:

\<%= select\_tag “use\_part”,  
options\_for\_select(@parts, @use\_part),  
:onchange =\> “#{remote\_function(:url =\> “select\_assembly”,  
:update =\> “disposition”,  
:with =\> “‘use\_part=’+$(‘use\_part’).value”)}”  
%\>  
\<% if @use\_part %\>  
\<%= select\_tag “use\_lot”,  
options\_for\_select(@lots, @use\_lot),  
:onchange =\> “#{remote\_function(:url =\> “select\_assembly”,  
:update =\> “disposition”,  
:with =\>  
“‘use\_lot=’+$(‘use\_lot’).value+’&use\_part=’+$(‘use\_part’).value”)}”  
%\>  
\<% end %\>

\<% if @use\_lot %\>  
\<%= link\_to\_remote “Use”,  
:url =\> {:action =\> “use\_in\_assembly”},  
:update =\> “disposition”,  
:with =\>  
“‘use\_lot=’+$(‘use\_lot’).value+’&use\_part=’+$(‘use\_part’).value+’&id=’+$(‘id’).value”  
%\>  
\<% end %\>

This works, but it seems pretty ugly, especially the bid where I keep  
appending more and more variables to the :with clause. As I was  
thinking about this last night, I started wondering if perhaps I  
should have used the #remote\_form\_tag helper. That way, when the form  
was submitted, the data contained in the form would be POSTed along  
with it and I wouldn’t have to keep appending parameters to the :with  
clause.

The problem is (if it isn’t obvious by now), I haven’t the foggiest  
idea what I’m doing. Should I add an :onchange clause to the remote  
form tag? If so, what javascript function should it call? Should it  
include the :update =\> “disposition” option, indicating that the  
result should replace the contents of the “disposition” div (BTW, this  
partial is the only thing within that div). Should the select tags  
(continue to) have the :update option invoking the #select\_assembly  
action on my controller?

I’ll keep muddling through this and will probably learn some answers  
sooner or later (or possibly give up in a blue depressive funk), but I  
thought I would ask what other folks do or have done.

–wpd

---

<div class="post-metadata">

**Author:** ![oldbug](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/o/c0e974/32.png) [@oldbug](https://www.ruby-forum.com/u/oldbug)\
**Post date:** [September 23, 2009, 4:40pm UTC](https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003/2 "2009-09-23T16:40:09Z")

</div>

Here is my best idea so far, which, unfortunately, doesn’t work…

\<% form\_remote\_tag :url =\> “select\_assembly”, :update =\>  
“disposition”, :html =\> {:id =\> ‘xxx’} do %\>  
\<%= select\_tag “use\_part”,  
options\_for\_select(@parts, @use\_part),  
:onchange =\> “$(‘xxx’).submit()”  
%\>  
\<% if @use\_part %\>  
\<%= select\_tag “use\_lot”, options\_for\_select(@lots, @use\_lot) %\>  
\<% if @use\_lot %\>  
submit somehow  
\<% end %\>  
\<% end %\>  
\<% end %\>

I call it my “best” idea because it seems to make sense to me. Since  
it doesn’t work, it obviously doesn’t make the correct sense to me.

The #form\_remote\_tag creates a form with an “onsubmit” attribute that  
looks like:

onsubmit=“new Ajax.Updater(‘disposition’, ‘select\_assembly’,  
{asynchronous:true, evalScripts:true,  
parameters:Form.serialize(this)}); return false;”

That looks an awful lot like AJAX/JavaScript code I’ve seen else where  
that should update the “disposition” div when the form is submitted.  
My #select\_tag has an :onchange attribute that submits the form.

That makes sense to me, and it almost, sortof, kinda, works. The part  
that doesn’t work is the AJAX thing – instead of updating the  
“disposition” div, my browser (FF) gets directed to a new page  
(http://…/select\_assembly) and displays the raw HTML for 2 select  
boxes. (I render that, without a layout, in my #select\_assembly  
action).

Why doesn’t the “disposition” div update? What am I missing?

–wpd

---

<div class="post-metadata">

**Author:** ![oldbug](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/o/c0e974/32.png) [@oldbug](https://www.ruby-forum.com/u/oldbug)\
**Post date:** [September 23, 2009, 6:25pm UTC](https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003/3 "2009-09-23T18:25:34Z")

</div>

Just in case anybody is interested in this thread… here is what I  
got to work for me:

\<% form\_remote\_tag :url =\> “select\_assembly”, :update =\> “disposition”  
do %\>  
\<%= disposition\_select\_tag “use\_part”, @parts, @use\_part %\>  
\<% if @use\_part %\>  
\<%= disposition\_select\_tag “use\_lot”, @lots, @use\_lot %\>  
\<% if @use\_lot %\>  
submit somehow  
\<% end %\>  
\<% end %\>  
\<% end %\>

where I defined #disposition\_select\_tag in my helpers file as:

def disposition\_select\_tag(name, container, selected)  
select\_tag(name,  
options\_for\_select(container, selected),  
:onchange =\> ‘if  
(this.up(“form”).onsubmit()){this.up(“form”).submit();}’)  
end

The piece that I was missing was that there seems to be a difference  
between calling the submit() JavaScript function, which acted like a  
normal form submit, pointing my browser to a new URL, and calling  
onsubmit(), which executed the AJAX code to do the update in the  
background.

If anybody has read this thread this far… thanks for the company 🙂

–wpd

---

<div class="post-metadata">

**Author:** ![oldbug](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/o/c0e974/32.png) [@oldbug](https://www.ruby-forum.com/u/oldbug)\
**Post date:** [September 23, 2009, 6:30pm UTC](https://www.ruby-forum.com/t/how-to-use-remote-form-tag/176003/4 "2009-09-23T18:30:44Z")

</div>

Hi Patrick,

if i understand correctly you want to have 2 select boxes that are  
depending. So the second one changes it’s content mased on the first one  
…

Took me some time to find out …

The trick was to put the second select into it’s own partial :

the view would look like this :

```auto
<label><%=h('1st Selectbox')%></label>
<%= @departments = Department.find(:all, :order => "name")
      collection_select('depart', 'department_id', @departments, :id, 
:name, :include_blank => true) %>
      <br />
      <label><%=h('2nd Selectbox')%></label>
     <div id="taskselect"
       <%= render(:partial => 'taskselect') %>
    </div>

      <%= observe_field 'depart_department_id',:update => 
'taskselect',:url => {:action => 'change_taskgroup'},:with => 
'depart_department_id'%>
```

if the first collection\_select changes it the “observe\_field” will call  
the controller action ‘change\_taskgroup’ with parameter  
‘depart\_department\_id’ (that’s the value of the selected item in  
selectbox 1) and the re-render the div taskselect.

```auto
  def change_taskgroup
    @varDepartment = params[:depart_department_id]
    @categories = Taskcategory.by_department(@varDepartment)
    render :partial => 'taskselect', :layout => false
  end
```

the controller will fetch the new categories and “re-render” the div  
taskselect with new values.

Hope that helped

best regards  
Alex