Skip to content

Commit 18605ad

Browse files
rizwanrezajeremy
authored andcommitted
HTML5 button_tag helper
This tag is similar in nature to submit_tag, but allows more control. It also doesn't submit if submit type isn't used, allowing JavaScript to control the flow where required. For more information: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element
1 parent 2b2b506 commit 18605ad

File tree

3 files changed

+83
-0
lines changed

3 files changed

+83
-0
lines changed

actionpack/CHANGELOG

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
*Rails 3.1.0 (unreleased)*
22

3+
* HTML5 button_tag helper. [Rizwan Reza]
4+
35
* Template lookup now searches further up in the inheritance chain. [Artemave]
46

57
* Brought back config.action_view.cache_template_loading, which allows to decide whether templates should be cached or not. [Piotr Sarnacki]
@@ -33,14 +35,17 @@
3335

3436
* Add Rack::Cache to the default stack. Create a Rails store that delegates to the Rails cache, so by default, whatever caching layer you are using will be used for HTTP caching. Note that Rack::Cache will be used if you use #expires_in, #fresh_when or #stale with :public => true. Otherwise, the caching rules will apply to the browser only. [Yehuda Katz, Carl Lerche]
3537

38+
3639
*Rails 3.0.2 (unreleased)*
3740

3841
* The helper number_to_currency accepts a new :negative_format option to be able to configure how to render negative amounts. [Don Wilson]
3942

43+
4044
*Rails 3.0.1 (October 15, 2010)*
4145

4246
* No Changes, just a version bump.
4347

48+
4449
*Rails 3.0.0 (August 29, 2010)*
4550

4651
* password_field renders with nil value by default making the use of passwords secure by default, if you want to render you should do for instance f.password_field(:password, :value => @user.password) [Santiago Pastorino]

actionpack/lib/action_view/helpers/form_tag_helper.rb

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,56 @@ def submit_tag(value = "Save changes", options = {})
401401
tag :input, { "type" => "submit", "name" => "commit", "value" => value }.update(options.stringify_keys)
402402
end
403403

404+
# Creates a button element that defines a <tt>submit</tt> button,
405+
# <tt>reset</tt>button or a generic button which can be used in
406+
# JavaScript, for example. You can use the button tag as a regular
407+
# submit tag but it isn't supported in legacy browsers. However,
408+
# button tag allows richer labels such as images and emphasis.
409+
#
410+
# ==== Options
411+
# * <tt>:confirm => 'question?'</tt> - If present, the
412+
# unobtrusive JavaScript drivers will provide a prompt with
413+
# the question specified. If the user accepts, the form is
414+
# processed normally, otherwise no action is taken.
415+
# * <tt>:disabled</tt> - If true, the user will not be able to
416+
# use this input.
417+
# * <tt>:disable_with</tt> - Value of this parameter will be
418+
# used as the value for a disabled version of the submit
419+
# button when the form is submitted. This feature is provided
420+
# by the unobtrusive JavaScript driver.
421+
# * Any other key creates standard HTML options for the tag.
422+
#
423+
# ==== Examples
424+
# button_tag
425+
# # => <button name="button" type="button">Button</button>
426+
#
427+
# button_tag "<strong>Ask me!</strong>"
428+
# # => <button name="button" type="button">
429+
# <strong>Ask me!</strong>
430+
# </button>
431+
#
432+
# button_tag "Checkout", :disable_with => "Please wait..."
433+
# # => <button data-disable-with="Please wait..." name="button"
434+
# type="button">Checkout</button>
435+
#
436+
def button_tag(label = "Button", options = {})
437+
options.stringify_keys!
438+
439+
if disable_with = options.delete("disable_with")
440+
options["data-disable-with"] = disable_with
441+
end
442+
443+
if confirm = options.delete("confirm")
444+
options["data-confirm"] = confirm
445+
end
446+
447+
["type", "name"].each do |option|
448+
options[option] = "button" unless options[option]
449+
end
450+
451+
content_tag :button, label.to_s.html_safe, { "type" => options.delete("type") }.update(options)
452+
end
453+
404454
# Displays an image which when clicked will submit the form.
405455
#
406456
# <tt>source</tt> is passed to AssetTagHelper#path_to_image

actionpack/test/template/form_tag_helper_test.rb

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,34 @@ def test_submit_tag_with_confirmation_and_with_disable_with
385385
)
386386
end
387387

388+
def test_button_tag
389+
assert_dom_equal(
390+
%(<button name="button" type="button">Button</button>),
391+
button_tag
392+
)
393+
end
394+
395+
def test_button_tag_with_submit_type
396+
assert_dom_equal(
397+
%(<button name="button" type="submit">Save</button>),
398+
button_tag("Save", :type => "submit")
399+
)
400+
end
401+
402+
def test_button_tag_with_reset_type
403+
assert_dom_equal(
404+
%(<button name="button" type="reset">Reset</button>),
405+
button_tag("Reset", :type => "reset")
406+
)
407+
end
408+
409+
def test_button_tag_with_disabled_option
410+
assert_dom_equal(
411+
%(<button name="button" type="reset" disabled="disabled">Reset</button>),
412+
button_tag("Reset", :type => "reset", :disabled => true)
413+
)
414+
end
415+
388416
def test_image_submit_tag_with_confirmation
389417
assert_dom_equal(
390418
%(<input type="image" src="/images/save.gif" data-confirm="Are you sure?" />),

0 commit comments

Comments
 (0)