How to set unique_ids on form attributes for multiple forms in a DOM?

Question

I am working on a rails app where we have several form instances in the DOM. Looks something like this:

def edit
  // Something here ...
  @book = Book.find_by_id(params[:id])
  if @book.pages.empty? 
    (0..3).each do |i|
      @book.pages.create
    end          
  end
  @pages = @book.pages
end

Rails outputs the following forms:

     <form method="post" id="edit_page_36" enctype="multipart/form-data" data-remote="true" class="edit_page" autocomplete="off" action="/pages/36" accept-charset="UTF-8">
       <div style="margin:0;padding:0;display:inline">
         <input type="hidden" value="✓" name="utf8">
         <input type="hidden" value="patch" name="_method">
         <input type="hidden" value="c3DA/d247CSL3mc8aOXNVkQ8D9r5Pfzbm9DYWDRn52g=" name="authenticity_token">
        </div>
        <input type="hidden" value="36" name="page[id]" id="page_id">
        <input type="hidden" name="page[body]" id="page_body">
        <input type="hidden" name="page[json]" id="page_json">
        <input type="hidden" name="page[background_image]" id="page_background_image">
        <input type="hidden" value="1" name="page[page_no]" id="page_page_no">
        <input type="hidden" value="21" name="page[book_id]" id="page_book_id">
     </form>

and ...

     <form method="post" id="edit_page_37" enctype="multipart/form-data" data-remote="true" class="edit_page" autocomplete="off" action="/pages/37" accept-charset="UTF-8">
        <div style="margin:0;padding:0;display:inline">
          <input type="hidden" value="✓" name="utf8">
          <input type="hidden" value="patch" name="_method">
          <input type="hidden" value="c3DA/d247CSL3mc8aOXNVkQ8D9r5Pfzbm9DYWDRn52g=" name="authenticity_token">
        </div>
        <input type="hidden" value="37" name="page[id]" id="page_id">
        <input type="hidden" name="page[body]" id="page_body">
        <input type="hidden" name="page[json]" id="page_json">
        <input type="hidden" name="page[background_image]" id="page_background_image">
        <input type="hidden" value="2" name="page[page_no]" id="page_page_no">
        <input type="hidden" value="21" name="page[book_id]" id="page_book_id">
     </form>

and so on.

The hidden_input_fields, as you can see, in each of these form have the same identifier :id = "page_body", :id = "page_json" etc. Isn't this incorrect as per standards/specifications? From what I understand an identifier (:id) is supposed to be unique across the DOM because, well, it supposed to identify something.

Anyway, so instead of id = "page_body" what I want is to have rails output id = "page_body_36" for the form with id "edit_page_36" for all its attributes.

The form_for @page is like this:

= form_for page, :remote => true, :html => { :multipart => true, :autocomplete => 'off'} do |f|

  = f.hidden_field :body, :value => page.body
  = f.hidden_field :json, :value => page.json
  = f.hidden_field :background_image
  = f.hidden_field :page_no, :value => page.page_no
  = f.hidden_field :book_id, :value => @book.id

Any clues?

It would be helpful if you can show us your view – usha Jul 31 '14 at 16:17 — usha, Jul 31 '14 at 16:17

RAJ · Answer 1 · 2014-08-01T05:46:30.760

1

You need to specify id for the forms externally. Update your view form as below:

= form_for page, :html => { :remote => true, :multipart => true, :autocomplete => 'off'} do |f|
  = f.hidden_field :id, :value => page.id, :id => "page_id_#{page.id}" # new field
  = f.hidden_field :body, :value => page.body, :id => "page_body_#{page.id}"
  = f.hidden_field :json, :value => page.json, :id => "page_json_#{page.id}"
  = f.hidden_field :background_image, :id => "page_background_image_#{page.id}"
  = f.hidden_field :page_no, :value => page.page_no, :id => "page_page_no_#{page.id}"
  = f.hidden_field :book_id, :value => @book.id, :id => "page_book_id_#{page.id}"

edited Aug 01 '14 at 05:46

answered Jul 31 '14 at 21:03

RAJ

9,697
1
33
63

This will set unique id to the form, not to the fields contained in the form. I thought the dom_id method would be of help here, but even that doesn't seem to be working. So far at least. – Marvin Danig Aug 01 '14 at 05:13
Have a look onm updated answer.. if I understand you want to have unique IDs for each element.. – RAJ Aug 01 '14 at 05:40
Yes, this works thanks! The only problem I see with it is a lot of repeating code to do the just one thing. Doesn't it look ugly? – Marvin Danig Aug 01 '14 at 14:39
Agree, you can try `js` then. It will add dynamic IDs to your fields. However, that is not preferable because it will update IDs after DOM and js load – RAJ Aug 01 '14 at 15:05

How to set unique_ids on form attributes for multiple forms in a DOM?

1 Answers1