Question

我正在尝试创建一个动态表单，其中底部的某些表单的名称基于顶部的某些表单的值。例如......

在页面顶部会有两个下拉菜单。在页面的底部，将有两个radiobuttons。第一个radiobutton的名称将具有第一个下拉菜单选项的名称，第二个radiobutton将具有第二个下拉菜单选项的名称。

这是我到目前为止所做的：

<%= 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 %>

文本字段将被那些单选按钮而不是文本字段替换。

如何在提交表单之前访问下拉菜单的值？

Answer 1

要获得更全面的答案，我建议您在此主题上观看railscasts episode，但您需要专业版（阅读：付费）订阅。

由于你没有做任何超级复杂的事情，你可以快速做到这一点。肮脏的一些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()处理程序进行ajax调用，该调用将加载服务器生成的HTML，这可以使用适当的表单帮助程序等来创建。但是对于这么简单的任务来说，这似乎有些过分。

（另外，请注意，如果团队名称可以由用户定义，则此javascript可能会打开脚本注入攻击，因此需要进行清理。）

请注意，如果您希望表单在用户交互时更改，而用户实际上不必在更改之前提交表单（重建页面并重新加载视图），则使用javascript。我认为。你可以用CSS做一些时髦的事情，但这实际上是令人讨厌的。

Rails会在填写完成后自行更新？

1 个答案: