0

動的フォームを作成しようとしています。下部のフォームの名前は、上部のフォームの値に基づいています。例えば...

ページの上部には、2 つのドロップダウン メニューがあります。ページの下部には、2 つのラジオボタンがあります。最初のラジオボタンの名前は最初のドロップダウン メニューの選択肢の名前になり、2 番目のラジオボタンは 2 番目のドロップダウン メニューの選択肢の名前になります。

これは私がこれまでに持っているものです:

<%= simple_form_for(@game) do |f| %>
  <%= f.error_notification %>
  <center>
    <div class="form-inputs">
      <%= choices = options_for_select( Team.all.map { |team| team[:name] } ) %>
        <p>Team 1:</p>
        <%= f.select :first_team_name, choices %>
        <p>Team 2:</p>
        <%= f.select :second_team_name, choices %>
        <p>Who you think will win</p>
        <%= f.text_field :user_guess %>

        </br>

        <%= f.submit "Simulate!", class: "btn btn-large btn-primary"%>
    </div>
  </center>
<% end %>

テキスト フィールドは、テキスト フィールドではなく、これらのラジオボタンに置​​き換えられます。

フォームを送信する前にドロップダウン メニューの値にアクセスするにはどうすればよいですか?

4

1 に答える 1

1

より包括的な回答については、このトピックに関するrailscasts のエピソードを見ることをお勧めしますが、プロ (有料) サブスクリプションが必要です。

あなたは超複雑なことをしていないので、いくつかのJavaScriptを使って素早く＆汚いことをすることができます：

$(function(){
  $('select').change(function(){
    html = ''
    $('select').each(function(){
      html += $(this).val() + '<input type="checkbox" name="game[user_guess]" val="' + $(this).val() +'"/>'
    })
    $('div.user_guess').html(html)
  })
})

コードを直接貼り付ける場合は、ビューにも div を追加する必要があります。

<p>Who you think will win</p>
<div class="user_guess"></div>

JavaScript で HTML を作成するのが苦手ですか? change()サーバー生成の HTML をロードする ajax 呼び出しをハンドラーに行わせることができます。これは、適切なフォーム ヘルパーなどを使用して行うことができます。しかし、そのような単純なタスクでは、やり過ぎのように思えます。

(また、チーム名をユーザーが定義できる場合、この JavaScript によってスクリプト インジェクション攻撃を受ける可能性があるため、必要に応じてサニタイズしてください。)

ユーザーがフォームを変更する前に実際にフォームを送信する必要なく (ページを再構築してビューをリロードする)、ユーザーの操作時にフォームを変更する場合は、javascriptを使用する必要があることに注意してください。おもう。CSS でできる奇妙なことがあるかもしれませんが、それを実装するのは本当に厄介です。

于 2013-03-12T02:50:11.053 に答える