form_tag_helper.rb 21.2 KB
Newer Older
1
require 'cgi'
2
require 'action_view/helpers/tag_helper'
3 4 5

module ActionView
  module Helpers
6 7
    # Provides a number of methods for creating form tags that doesn't rely on an ActiveRecord object assigned to the template like
    # FormHelper does. Instead, you provide the names and values manually.
8
    #
9 10
    # NOTE: The HTML options <tt>disabled</tt>, <tt>readonly</tt>, and <tt>multiple</tt> can all be treated as booleans. So specifying 
    # <tt>:disabled => true</tt> will give <tt>disabled="disabled"</tt>.
11
    module FormTagHelper
12
      # Starts a form tag that points the action to an url configured with <tt>url_for_options</tt> just like
13 14
      # ActionController::Base#url_for. The method for the form defaults to POST.
      #
15
      # ==== Options
16
      # * <tt>:multipart</tt> - If set to true, the enctype is set to "multipart/form-data".
17 18 19
      # * <tt>:method</tt>    - The method to use when submitting the form, usually either "get" or "post".
      #                         If "put", "delete", or another verb is used, a hidden input with name _method 
      #                         is added to simulate the verb over post.
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
      # * A list of parameters to feed to the URL the form will be posted to.
      #
      # ==== Examples
      #   form_tag('/posts')                      
      #   # => <form action="/posts" method="post">
      #
      #   form_tag('/posts/1', :method => :put)   
      #   # => <form action="/posts/1" method="put">
      #
      #   form_tag('/upload', :multipart => true) 
      #   # => <form action="/upload" method="post" enctype="multipart/form-data">
      # 
      #   <% form_tag '/posts' do -%>
      #     <div><%= submit_tag 'Save' %></div>
      #   <% end -%>
      #   # => <form action="/posts" method="post"><div><input type="submit" name="submit" value="Save" /></div></form>
36
      def form_tag(url_for_options = {}, options = {}, *parameters_for_url, &block)
37
        html_options = html_options_for_form(url_for_options, options, *parameters_for_url)
38
        if block_given?
39
          form_tag_in_block(html_options, &block)
40
        else
41
          form_tag_html(html_options)
42
        end
43 44
      end

45 46 47 48
      # Creates a dropdown selection box, or if the <tt>:multiple</tt> option is set to true, a multiple
      # choice selection box.
      #
      # Helpers::FormOptions can be used to create common select boxes such as countries, time zones, or
49 50 51 52 53 54
      # associated records. <tt>option_tags</tt> is a string containing the option tags for the select box.
      #
      # ==== Options
      # * <tt>:multiple</tt> - If set to true the selection will allow multiple choices.
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML attributes for the tag.
55
      #
56
      # ==== Examples
57
      #   select_tag "people", "<option>David</option>"
58
      #   # => <select id="people" name="people"><option>David</option></select>
59
      #
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
      #   select_tag "count", "<option>1</option><option>2</option><option>3</option><option>4</option>"
      #   # => <select id="count" name="count"><option>1</option><option>2</option>
      #   #    <option>3</option><option>4</option></select>
      #
      #   select_tag "colors", "<option>Red</option><option>Green</option><option>Blue</option>", :multiple => true
      #   # => <select id="colors" multiple="multiple" name="colors"><option>Red</option>
      #   #    <option>Green</option><option>Blue</option></select>
      #
      #   select_tag "locations", "<option>Home</option><option selected="selected">Work</option><option>Out</option>"
      #   # => <select id="locations" name="locations"><option>Home</option><option selected='selected'>Work</option>
      #   #    <option>Out</option></select>
      #
      #   select_tag "access", "<option>Read</option><option>Write</option>", :multiple => true, :class => 'form_input'
      #   # => <select class="form_input" id="access" multiple="multiple" name="access"><option>Read</option>
      #   #    <option>Write</option></select>
      #
      #   select_tag "destination", "<option>NYC</option><option>Paris</option><option>Rome</option>", :disabled => true
      #   # => <select disabled="disabled" id="destination" name="destination"><option>NYC</option>
      #   #    <option>Paris</option><option>Rome</option></select>
79
      def select_tag(name, option_tags = nil, options = {})
80
        content_tag :select, option_tags, { "name" => name, "id" => name }.update(options.stringify_keys)
81 82
      end

83 84
      # Creates a standard text field; use these text fields to input smaller chunks of text like a username
      # or a search query.
85
      #
86
      # ==== Options
87 88 89
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * <tt>:size</tt> - The number of visible characters that will fit in the input.
      # * <tt>:maxlength</tt> - The maximum number of characters that the browser will allow the user to enter.
90
      # * Any other key creates standard HTML attributes for the tag.
91
      # 
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
      # ==== Examples
      #   text_field_tag 'name'
      #   # => <input id="name" name="name" type="text" />
      #
      #   text_field_tag 'query', 'Enter your search query here'
      #   # => <input id="query" name="query" type="text" value="Enter your search query here" />
      #
      #   text_field_tag 'request', nil, :class => 'special_input'
      #   # => <input class="special_input" id="request" name="request" type="text" />
      #
      #   text_field_tag 'address', '', :size => 75
      #   # => <input id="address" name="address" size="75" type="text" value="" />
      #
      #   text_field_tag 'zip', nil, :maxlength => 5
      #   # => <input id="zip" maxlength="5" name="zip" type="text" />
      #
      #   text_field_tag 'payment_amount', '$0.00', :disabled => true
      #   # => <input disabled="disabled" id="payment_amount" name="payment_amount" type="text" value="$0.00" />
      #
      #   text_field_tag 'ip', '0.0.0.0', :maxlength => 15, :size => 20, :class => "ip-input"
      #   # => <input class="ip-input" id="ip" maxlength="15" name="ip" size="20" type="text" value="0.0.0.0" />
113
      def text_field_tag(name, value = nil, options = {})
114
        tag :input, { "type" => "text", "name" => name, "id" => name, "value" => value }.update(options.stringify_keys)
115 116
      end

117 118 119 120 121 122 123 124 125
      # Creates a hidden form input field used to transmit data that would be lost due to HTTP's statelessness or
      # data that should be hidden from the user.
      #
      # ==== Options
      # * Creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   hidden_field_tag 'tags_list'
      #   # => <input id="tags_list" name="tags_list" type="hidden" />
126
      #
127 128 129 130 131 132
      #   hidden_field_tag 'token', 'VUBJKB23UIVI1UU1VOBVI@'
      #   # => <input id="token" name="token" type="hidden" value="VUBJKB23UIVI1UU1VOBVI@" />
      #
      #   hidden_field_tag 'collected_input', '', :onchange => "alert('Input collected!')"
      #   # => <input id="collected_input" name="collected_input" onchange="alert('Input collected!')" 
      #   #    type="hidden" value="" />
133
      def hidden_field_tag(name, value = nil, options = {})
134
        text_field_tag(name, value, options.stringify_keys.update("type" => "hidden"))
135 136
      end

137 138
      # Creates a file upload field.  If you are using file uploads then you will also need 
      # to set the multipart option for the form tag:
139 140 141 142 143 144 145 146
      #
      #   <%= form_tag { :action => "post" }, { :multipart => true } %>
      #     <label for="file">File to Upload</label> <%= file_field_tag "file" %>
      #     <%= submit_tag %>
      #   <%= end_form_tag %>
      #
      # The specified URL will then be passed a File object containing the selected file, or if the field 
      # was left blank, a StringIO object.
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
      #
      # ==== Options
      # * Creates standard HTML attributes for the tag.
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      #
      # ==== Examples
      #   file_field_tag 'attachment'
      #   # => <input id="attachment" name="attachment" type="file" />
      #
      #   file_field_tag 'avatar', :class => 'profile-input'
      #   # => <input class="profile-input" id="avatar" name="avatar" type="file" />
      #
      #   file_field_tag 'picture', :disabled => true
      #   # => <input disabled="disabled" id="picture" name="picture" type="file" />
      #
      #   file_field_tag 'resume', :value => '~/resume.doc'
      #   # => <input id="resume" name="resume" type="file" value="~/resume.doc" />
      #
      #   file_field_tag 'user_pic', :accept => 'image/png,image/gif,image/jpeg'
      #   # => <input accept="image/png,image/gif,image/jpeg" id="user_pic" name="user_pic" type="file" /> 
      #
      #   file_field_tag 'file', :accept => 'text/html', :class => 'upload', :value => 'index.html'
      #   # => <input accept="text/html" class="upload" id="file" name="file" type="file" value="index.html" />
170
      def file_field_tag(name, options = {})
171
        text_field_tag(name, nil, options.update("type" => "file"))
172 173
      end

174
      # Creates a password field, a masked text field that will hide the users input behind a mask character.
175
      #
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * <tt>:size</tt> - The number of visible characters that will fit in the input.
      # * <tt>:maxlength</tt> - The maximum number of characters that the browser will allow the user to enter.
      # * Any other key creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   password_field_tag 'pass'
      #   # => <input id="pass" name="pass" type="password" />
      #
      #   password_field_tag 'secret', 'Your secret here'
      #   # => <input id="secret" name="secret" type="password" value="Your secret here" />
      #
      #   password_field_tag 'masked', nil, :class => 'masked_input_field'
      #   # => <input class="masked_input_field" id="masked" name="masked" type="password" />
      #
      #   password_field_tag 'token', '', :size => 15
      #   # => <input id="token" name="token" size="15" type="password" value="" />
      #
      #   password_field_tag 'key', nil, :maxlength => 16
      #   # => <input id="key" maxlength="16" name="key" type="password" />
      #
      #   password_field_tag 'confirm_pass', nil, :disabled => true
      #   # => <input disabled="disabled" id="confirm_pass" name="confirm_pass" type="password" />
      #
      #   password_field_tag 'pin', '1234', :maxlength => 4, :size => 6, :class => "pin-input"
      #   # => <input class="pin-input" id="pin" maxlength="4" name="pin" size="6" type="password" value="1234" />
203
      def password_field_tag(name = "password", value = nil, options = {})
204
        text_field_tag(name, value, options.update("type" => "password"))
205 206
      end

207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
      # Creates a text input area; use a textarea for longer text inputs such as blog posts or descriptions.
      #
      # ==== Options
      # * <tt>:size</tt> - A string specifying the dimensions of the textarea using dimensions (e.g., "25x10").
      # * <tt>:rows</tt> - Specify the number of rows in the textarea
      # * <tt>:cols</tt> - Specify the number of columns in the textarea
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML attributes for the tag.
      #
      # ==== Examples
      #   text_area_tag 'post'
      #   # => <textarea id="post" name="post"></textarea>
      #
      #   text_area_tag 'bio', @user.bio
      #   # => <textarea id="bio" name="bio">This is my biography.</textarea>
222
      #
223 224 225 226 227 228 229 230 231 232 233
      #   text_area_tag 'body', nil, :rows => 10, :cols => 25
      #   # => <textarea cols="25" id="body" name="body" rows="10"></textarea>
      #
      #   text_area_tag 'body', nil, :size => "25x10"
      #   # => <textarea name="body" id="body" cols="25" rows="10"></textarea>
      #
      #   text_area_tag 'description', "Description goes here.", :disabled => true
      #   # => <textarea disabled="disabled" id="description" name="description">Description goes here.</textarea>
      #
      #   text_area_tag 'comment', nil, :class => 'comment_input'
      #   # => <textarea class="comment_input" id="comment" name="comment"></textarea>
234
      def text_area_tag(name, content = nil, options = {})
235 236 237
        options.stringify_keys!

        if size = options.delete("size")
238
          options["cols"], options["rows"] = size.split("x") if size.respond_to?(:split)
239
        end
240

241
        content_tag :textarea, content, { "name" => name, "id" => name }.update(options.stringify_keys)
242 243
      end

244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
      # Creates a check box form input tag.
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   check_box_tag 'accept'
      #   # => <input id="accept" name="accept" type="checkbox" value="1" />
      #
      #   check_box_tag 'rock', 'rock music'
      #   # => <input id="rock" name="rock" type="checkbox" value="rock music" />
      #
      #   check_box_tag 'receive_email', 'yes', true
      #   # => <input checked="checked" id="receive_email" name="receive_email" type="checkbox" value="yes" />
      #
      #   check_box_tag 'tos', 'yes', false, :class => 'accept_tos'
      #   # => <input class="accept_tos" id="tos" name="tos" type="checkbox" value="yes" />
      #
      #   check_box_tag 'eula', 'accepted', false, :disabled => true
      #   # => <input disabled="disabled" id="eula" name="eula" type="checkbox" value="accepted" />
265
      def check_box_tag(name, value = "1", checked = false, options = {})
266
        html_options = { "type" => "checkbox", "name" => name, "id" => name, "value" => value }.update(options.stringify_keys)
267
        html_options["checked"] = "checked" if checked
268
        tag :input, html_options
269 270
      end

271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
      # Creates a radio button; use groups of radio buttons named the same to allow users to 
      # select from a group of options.
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   radio_button_tag 'gender', 'male'
      #   # => <input id="gender_male" name="gender" type="radio" value="male" />
      #
      #   radio_button_tag 'receive_updates', 'no', true
      #   # => <input checked="checked" id="receive_updates_no" name="receive_updates" type="radio" value="no" />
      #
      #   radio_button_tag 'time_slot', "3:00 p.m.", false, :disabled => true
      #   # => <input disabled="disabled" id="time_slot_300_pm" name="time_slot" type="radio" value="3:00 p.m." />
      #
      #   radio_button_tag 'color', "green", true, :class => "color_input"
      #   # => <input checked="checked" class="color_input" id="color_green" name="color" type="radio" value="green" />
290
      def radio_button_tag(name, value, checked = false, options = {})
291
        pretty_tag_value = value.to_s.gsub(/\s/, "_").gsub(/(?!-)\W/, "").downcase
D
David Heinemeier Hansson 已提交
292
        pretty_name = name.to_s.gsub(/\[/, "_").gsub(/\]/, "")
293
        html_options = { "type" => "radio", "name" => name, "id" => "#{pretty_name}_#{pretty_tag_value}", "value" => value }.update(options.stringify_keys)
294
        html_options["checked"] = "checked" if checked
295
        tag :input, html_options
296 297
      end

298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
      # Creates a submit button with the text <tt>value</tt> as the caption. 
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * <tt>:disable_with</tt> - Value of this parameter will be used as the value for a disabled version 
      #                            of the submit button when the form is submitted.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   submit_tag
      #   # => <input name="commit" type="submit" value="Save changes" />
      #
      #   submit_tag "Edit this article"
      #   # => <input name="commit" type="submit" value="Edit this article" />
      #
      #   submit_tag "Save edits", :disabled => true
      #   # => <input disabled="disabled" name="commit" type="submit" value="Save edits" />
      #
      #   submit_tag "Complete sale", :disable_with => "Please wait..."
      #   # => <input name="commit" onclick="this.disabled=true;this.value='Please wait...';this.form.submit();" 
      #   #    type="submit" value="Complete sale" />
      #
      #   submit_tag nil, :class => "form_submit"
      #   # => <input class="form_submit" name="commit" type="submit" />
      #
      #   submit_tag "Edit", :disable_width => "Editing...", :class => 'edit-button'
      #   # => <input class="edit-button" disable_width="Editing..." name="commit" type="submit" value="Edit" />
325
      def submit_tag(value = "Save changes", options = {})
326 327 328
        options.stringify_keys!
        
        if disable_with = options.delete("disable_with")
329
          options["onclick"] = [
330
            "this.setAttribute('originalValue', this.value)",
331 332 333
            "this.disabled=true",
            "this.value='#{disable_with}'",
            "#{options["onclick"]}",
334 335 336
            "result = (this.form.onsubmit ? (this.form.onsubmit() ? this.form.submit() : false) : this.form.submit())",
            "if (result == false) { this.value = this.getAttribute('originalValue'); this.disabled = false }",
            "return result",
337
          ].join(";")
338 339 340
        end
          
        tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options.stringify_keys)
341
      end
342
      
343 344 345
      # Displays an image which when clicked will submit the form.
      #
      # <tt>source</tt> is passed to AssetTagHelper#image_path
346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362
      #
      # ==== Options
      # * <tt>:disabled</tt> - If set to true, the user will not be able to use this input.
      # * Any other key creates standard HTML options for the tag.
      #
      # ==== Examples
      #   image_submit_tag("login.png")
      #   # => <input src="/images/login.png" type="image" />
      #
      #   image_submit_tag("purchase.png"), :disabled => true
      #   # => <input disabled="disabled" src="/images/purchase.png" type="image" />
      #
      #   image_submit_tag("search.png"), :class => 'search-button'
      #   # => <input class="search-button" src="/images/search.png" type="image" />
      #
      #   image_submit_tag("agree.png"), :disabled => true, :class => "agree-disagree-button"
      #   # => <input class="agree-disagree-button" disabled="disabled" src="/images/agree.png" type="image" />
363
      def image_submit_tag(source, options = {})
364
        tag :input, { "type" => "image", "src" => image_path(source) }.update(options.stringify_keys)
365
      end
366 367 368 369 370 371

      # Creates a field set for grouping HTML form elements.
      #
      # <tt>legend</tt> will become the fieldset's title (optional as per W3C).
      #
      # === Examples
372
      #   <% field_set_tag do %>
373 374 375 376
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><p><input id="name" name="name" type="text" /></p></fieldset>
      #
377
      #   <% field_set_tag 'Your details' do %>
378 379 380
      #     <p><%= text_field_tag 'name' %></p>
      #   <% end %>
      #   # => <fieldset><legend>Your details</legend><p><input id="name" name="name" type="text" /></p></fieldset>
381
      def field_set_tag(legend = nil, &block)
382 383 384 385 386 387
        content = capture(&block)
        concat(tag(:fieldset, {}, true), block.binding)
        concat(content_tag(:legend, legend), block.binding) unless legend.blank?
        concat(content, block.binding)
        concat("</fieldset>", block.binding)
      end
388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
      
      private
        def html_options_for_form(url_for_options, options, *parameters_for_url)
          returning options.stringify_keys do |html_options|
            html_options["enctype"] = "multipart/form-data" if html_options.delete("multipart")
            html_options["action"]  = url_for(url_for_options, *parameters_for_url)
          end
        end
        
        def extra_tags_for_form(html_options)
          case method = html_options.delete("method").to_s
            when /^get$/i # must be case-insentive, but can't use downcase as might be nil
              html_options["method"] = "get"
              ''
            when /^post$/i, "", nil
              html_options["method"] = "post"
404
              request_forgery_protection_token ? content_tag(:div, token_tag, :style => 'margin:0;padding:0') : ''
405 406
            else
              html_options["method"] = "post"
407
              content_tag(:div, tag(:input, :type => "hidden", :name => "_method", :value => method) + token_tag, :style => 'margin:0;padding:0')
408 409 410 411 412 413 414 415 416 417 418 419 420 421
          end
        end
        
        def form_tag_html(html_options)
          extra_tags = extra_tags_for_form(html_options)
          tag(:form, html_options, true) + extra_tags
        end
        
        def form_tag_in_block(html_options, &block)
          content = capture(&block)
          concat(form_tag_html(html_options), block.binding)
          concat(content, block.binding)
          concat("</form>", block.binding)
        end
422 423 424 425 426 427 428 429

        def token_tag
          if request_forgery_protection_token.nil?
            ''
          else
            tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_token)
          end
        end
430 431 432
    end
  end
end