button_to creates non-clickable button

Question

I've noticed an odd behavior with button_to. I have some stylized buttons. When button_to is generated the input submit field is placed inside the button element. What ends up happening is that the inner edges of the button when clicked do not redirect the user to the new page. The user is forced to directly click on the text to redirect.

My question is, how do I fix this? I don't think CSS is a possible solution. Ideally I would like to apply the classes I pass in the button_to method to the input field. That way the input field becomes the button and not the form.

Here is the button_to method.

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-button is-normal start-course'}
         ).html_safe

Here is the html that is generated.

<form class="start-course-button is-normal start-course" method="post" action="/new-course">
  // This must be clicked below and not the form itself for there to be a redirect
  <input type="submit" value="Click me!">

  <input type="hidden" name="authenticity_token" value="secret_auth_token">
</form>

score 2 · Accepted Answer · answered May 11 '16 at 21:13

Currently, you are applying styles to the form rather than the submit input inside of it. You can use a child selector to select the submit input as the form's child for a pure CSS solution.

For clarity's sake, create a new class to apply to the form. This class will select the child input of type submit.

.start-course-form input[type="submit"] {
/* button styles */
}

Then, update your helper method with the correct class.

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-form is-normal start-course'}
         ).html_safe

Note that this will not make the button a member of the start-course-button class, it will just look the same.

max · Answer 2 · 2016-05-11T22:12:57.433

0

button_to does not allow you to apply classes or customize the submit input.

Rather you would use form_tag to manually create the form if you need that kind of flexibility. Edited to show how it would work in a presenter.

class CoursePresenter
  def initialize(helpers)
    @h = helpers
  end

  def new_course_button
    h.form_for("/new-course") do
      h.submit_tag "/new-course",
        class: 'start-course-button is-normal start-course'
    end
  end

  private
  attr_reader :h
end

You could also use a CSS rule that targets the input element instead of the form:

.start-course-button input[type="submit"] {
  border: 2px solid black;
  padding: 10px 15px;
  background-color: pink;
}

<form class="start-course-button">
  <input type="submit" value="Click me">
</form>

edited May 11 '16 at 22:12

answered May 11 '16 at 20:55

max

96,212
14
104
165

I came to that conclusion too. Here's the problem. I'm using a presenter when calling `button_to`. In order for me to use `form_tag` inside the preseneter, I have to turn off the csrf token. This would open up a security vulnerability so I'm implemented to url helpers. – thank_you May 11 '16 at 21:01
1

Looks like he's inside a helper method. This could get messy, although OP is better off using a partial. He could also do it with CSS by creating/using a special class on the form that selects the child submit button. – Substantial May 11 '16 at 21:02
@Substantial. Care to explain the CSS solution? I didn't know I could have a parent form reference a child link when the form is clicked through pure CSS. – thank_you May 11 '16 at 21:04
1

True, using a `.start-course-button input[type="submit"]` selector is probably the simplest way. – max May 11 '16 at 21:05
@Substantial is talking about targeting the input instead of the form with the CSS rule that makes it look like a button - right now you are applying the rules to the form element which is why it only works when the user clicks the text. – max May 11 '16 at 21:09
That should suffice as an answer. Post it for future readers to see and I'll give credit. :) – thank_you May 11 '16 at 21:13
Added css example - you are wrong about `form_tag` however - it adds a hidden input with the authenticity token just like `button_to` thats kind of the whole point of using it. – max May 11 '16 at 22:06
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag – max May 11 '16 at 22:06

button_to creates non-clickable button

2 Answers2