Q&A: How to Set a Form’s ID in Rails?
20070109
HTML is not hard. Anyone who can program, in any language, should be able to write HTML with little or no training. Yet there are reasons why the HTML helper functions in Rails can be handy. Chief among them is the easy and fairly clean way you can incorporate variables and other constructs; after all, the idea here is to have an app generate some of the code rather than having to write every piece by hand.
I was happily marching to the tune of form_tag() when I decided that I wanted a little JavaScript function to interact with the form’s contents. Great, except the HTML form code being generated by that helper function wasn’t coming with its own id attribute.
I could probably have the JavaScript function refer to this particular form by indexing an array, but then it could break if I ever changed the layout of the page to include another form. Hardly ideal.
Question: How does one tell Rails what the form’s id should be when creating the form with the helper function (or the Ajax form_remote_tag)?
Answer: Unfortunately this is an area where my trusty rails book fell flat. Maybe they’ve answered this one in the second edition, I don’t have it yet. Google to the rescue, providing the answer on this archived list discussion.
Include an :html hash with the parameters and you’ll be able to set the form’s id, for example. I haven’t seen documentation on the attributes which work in that hash, but code like this:
<%= form_remote_tag(:url => { :action => :create }, :update => 'main_list', :position => :bottom, :html => {:id => 'main_input' }) %>
results in HTML output like this:
<form action="/list/create" id="main_input" method="post" onsubmit="new Ajax.Request('/list/create', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;">
Update (20070127): I played with the :html hash a little more and it turns out that it will accept arbitrary attributes; for example this:
<%= form_tag({ :action => :create }, { :yummy => 'yumminess' }) %>
…sets a yummy attribute in the form tag. Of course certain attributes that are already in use (such as :onsubmit for the Ajax version) get overwritten, but otherwise any valid HTML attribute should be fine.
20070126 04:58
i am trying to do something similar, but perhaps really wrongheaded. i want to call a javascript function on a rails submit; before the form is submitted i want to dynamically add fields and then send their values. i’d love to use an ajax remote_form_tag to generate the form. i’ve been looking at the html options hash also but can’t find any way of doing something like :onsubmit => “call javascript function”.
do you have any thoughts on this? any help would be much appreciated.
thanks,
jen
20070127 19:34
Jen:
With a standard form you can do this:
<%= form_tag({ :action => :create }, { :onsubmit => 'function call' }) %>However you probably noticed that if you try using :onsubmit with form_remote_tag(), your event handler gets replaced with the Ajax handler set up by Rails.
One option for Ajax may be to use the :before callback, which should allow you to call a function before the request is made. I haven’t tested it, but that may be what you’re looking for.
20070224 14:41
Thanks! This really helped me. My book doesn’t mention the :html hash either.
20070226 21:52
You’re welcome, glad you found it useful Jonathon!
20070425 04:32
Thank You