使用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> 

这成功将其标记为.active选择div当它被点击，当选择（只是为了测试目的答案打印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 %> 

如果不采取行动，隐藏字段转换为<input type="hidden" name="time" id="time" value="{:id=>&quot;q1-hf&quot;}">在HTML中，这可能会或可能不会是一个问题。

并尝试了几种方法来替换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">，你可以按照你在问题中描述的方式来访问它。