单击Rails后激活Javascript功能form_for选择字段

Activate Javascript function after clicking on Rails form_for select field

本文关键字：for 选择 字段 form 功能 Rails 激活 Javascript 单击      更新时间：2023-09-26

>我有一个包含 3 个输入字段、击球、推杆和 GIR 的表单：

<%= form_for(@played_hole) do |f| %>
  <%= f.hidden_field :hole_par, value: @hole.par %>
  <%= f.label :strokes, "How many strokes?" %>
  <%= f.select(:strokes, options_for_select(generate_strokes_array(@hole.par), selected: @hole.par)) %>
  <%= f.label :putts, "How many putts?" %>
  <%= f.select :putts, options_for_select(generate_putts_array(5), selected: 1), onclick: calculateGIR() %>    
  <%= f.label :GIR, "Green in Regulation?" %>
  <%= f.select(:GIR, [['Yes', 1], ['No', 0]]) %>
  <%= f.submit "Next Hole", class: "btn btn-large btn-success" %>
<% end %>

我的目标是在用户单击第二个输入推杆后自动选择第三个字段 （：GIR）。 例如，如果洞是标准杆 4 杆，他们在 ：strokes 字段中选择了 5 杆，在 :p utts 字段中选择了 2 杆，那么我会知道他们没有得到绿色规则。 所以，我想自动将 ：GIR 选择切换为"否"。

我目前在注册 onclick（） 事件时遇到问题。 我已将onclick: calculateGIR()添加到 :p utts 选择字段中，但我在我的 PlayedHole#new 视图中收到此错误：undefined method calculateGIR' for #<#<Class:0xb5a684c4>:0xb591eac8>

我已将其添加到javascript/played_holes.js文件中：function calculateGIR() { alert("calculating GIR"); }但显然它没有被拾取。

基本上，我可以使用一些帮助在视图中调用javascript（或jQuery）函数。 然后，一旦我得到该设置，我想弄清楚如何从 ：strokes 和 :p utts 中提取所选值来计算 GIR。

对于那些好奇的人来说，GIR 意味着您在果岭上的杆数比洞的标准杆高 2（或更少）。 即标准杆 3 - 1 杆、标准杆 4 - 2 杆、标准杆 5 - 3（或更少）冲程。

我正在运行Rails 3.2，以防您好奇。

谢谢！

您需要将calculateGIR()放在引号中：

<%= f.select :putts, options_for_select(generate_putts_array(5), selected: 1), onclick: "calculateGIR()" %>

onclick HTML 属性应该是一个将在单击时执行的 JavaScript 代码字符串。相反，您正在尝试调用 Ruby 方法，calculateGIR .

替代我在你问题中的评论：

尝试： <%= f.select :putts, options_for_select(generate_putts_array(5), selected: 1), onclick: 'calculateGIR()' %> ， 放入 calculateGIR() 引号。

最好不要像你展示的那样将javascript放入你的HTML中。 执行此操作的简单方法是将id分配给select元素，并在更改事件中应用calculateGIR逻辑。

像下面这样的东西更好：

在您看来：

<%= f.select :putts, options_for_select(generate_putts_array(5), selected: 1), {}, id: 'putts' %>

在您的javascript/played_holes.js 

$(document).ready(function() {
  $('#putts').on('change', function() {
     // Place definition of calculateGIR() here.
  });
});
相关文章：