使用 Javascript/JQuery 设置 Rails `hidden_​​field_tag` 值

Question

我正在尝试使用 javascript 或 jquery 让我的应用程序将 div 的类 active 识别为我的 erb form_for 中 hidden_field_tag 的值。到目前为止，我已经建立并工作了以下结构：

<div id="q1" class="row gen-quest-div">
    <h1>How long do you have?</h1>
    <div class="row answers">
      <div id="q1-15" class="answer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-15.jpg', alt: "Put 15 minutes on the clock!" %>
        <p>15 Minutes</p>
      </div>
      <div id="q1-30" class="answer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-30.jpg', alt: "Put 30 minutes on the clock!" %>
        <p>30 Minutes</p>
      </div>
      <div id="q1-45" class="answer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-45.jpg', alt: "Put 45 minutes on the clock!" %>
        <p>45 Minutes</p>
      </div>
      <div id="q1-60" class="answer q1-answer col-xs-6 col-sm-3">
        <%= image_tag 'min-60.jpg', alt: "Put 60 minutes on the clock!" %>
        <p>60 Minutes</p>
      </div>
    </div> <!-- answers row -->
  </div> <!-- question div -->

<div class="btn-primary" id="pre-submit">Pre Submit</div>

<script>
// Selection handling
  $( document ).ready(function() {
      $('.q1-answer').on('click', function() {
        $('.q1-answer').removeClass('active');
        $(this).toggleClass('active');
      });
      $('.q2-answer').on('click', function() {
        $('.q2-answer').removeClass('active');
        $(this).toggleClass('active');
      });
      $('.q3-answer').on('click', function() {
        $('.q3-answer').removeClass('active');
        $(this).toggleClass('active');
      });
  });

  // Form handling
  $('#pre-submit').on('click', function() {
    if ($('#q1-15').hasClass('active')) {
        console.log("So far this works.");  // <<<<THIS LINE
      }
  }); 
</script>

这成功地选择了div，通过在单击它时将其标记为.active 并在选择答案时打印console.log 语句（仅用于测试目的......）。现在困难的部分是用什么替换标记线以使表单识别答案。我的表单结构如下：

  <%= form_for @generator do |f| %>
      <div id="q1-form-field">
        <%= hidden_field_tag :time, id: "q1-hf" %>
      </div>
      ...
      <div class="text-center">
        <h3><%= f.submit "Submit" %></h3>
      </div>
  <% end %>

当不采取任何行动时，隐藏字段在 html 中转换为<input type="hidden" name="time" id="time" value="{:id=>"q1-hf"}">，这可能有问题，也可能没有问题。

并尝试了几种方法来替换javascript中的console.log语句，并根据div是.active为隐藏字段分配一个值。

首先，document.getElementById("q1-hf").value = 1; 收到一个控制台错误，说 new:200 Uncaught TypeError: Cannot set property 'value' of null

或者，$('#q1-hf').val(1); 不会生成控制台错误，但也不会更改 hidden_field_tag 值。

谁能帮我搞定这个工作？我对实现相同目标的其他结构持开放态度，但我查看了其他帖子，例如 this 或 this，似乎说这应该是可能的。

Answer 1

<%= hidden_field_tag :time, id: "q1-hf" %>

这段代码正在使用id="time" 进行隐藏输入，因此您应该通过document.getElementById("time") 选择它

---

如果您希望 id 为“q1-hf”，则应将其更改为 <%= hidden_field_tag 'q1-hf' %>

它将呈现为<input name="q1-hf" id="q1-hf" type="hidden">，您可以按照您在问题中描述的方式访问它。