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子セレクターを使用して、純粋な CSS ソリューションの の子 submitとして入力を選択できます。form

わかりやすくするために、フォームに適用する新しいクラスを作成します。このクラスは 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 に答える