0

我注意到button_to. 我有一些程式化的按钮。当button_to生成时，输入提交字段被放置在按钮元素内。最终发生的是，单击按钮的内边缘不会将用户重定向到新页面。用户被迫直接点击要重定向的文本。

我的问题是，我该如何解决这个问题？我不认为 CSS 是一个可能的解决方案。理想情况下，我想将我在button_to方法中传递的类应用于输入字段。这样输入字段就变成了按钮而不是表单。

这是button_to方法。

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

这是生成的html。

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

2 回答 2

2

目前，您正在将样式应用于其中form而不是其中的submit输入。您可以使用子选择器来选择submit输入作为form纯 CSS 解决方案的子项。

为清楚起见，创建一个新类以应用于表单。此类将选择 type 的子输入submit。

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

然后，使用正确的类更新您的辅助方法。

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

请注意，这不会使按钮成为start-course-button该类的成员，它只是看起来相同。

于 2016-05-11T21:13:44.303 回答
0

button_to不允许您应用类或自定义提交输入。

相反，form_tag如果您需要这种灵活性，您将使用手动创建表单。编辑以显示它在演示者中的工作方式。

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

您还可以使用针对输入元素而不是表单的 CSS 规则：

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

于 2016-05-11T20:55:45.960 回答