jason328 jason328 - 5 months ago 8x
HTML Question

button_to creates non-clickable button

I've noticed an odd behavior with

. I have some stylized buttons. When
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
method to the input field. That way the input field becomes the button and not the form.

Here is the

button_to("Click me!",
{class: 'start-course-button is-normal start-course'}

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">


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!", 
          {class: 'start-course-form is-normal start-course'}

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