Using Javascript/JQuery to Set Rails `hidden_field_tag` Value

Question

I'm trying to use javascript or jquery to make my app recognize whichever div has a class of active as the value for a hidden_field_tag in my erb form_for . So far I have the following structure set up and working:

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

This successfully selects a div by marking it .active when it is clicked and prints the console.log statement when the answer is selected (just for testing purposes...). Now the hard part is what to replace the marked line with to make the form recognize the answer. I have my form structured like this:

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

When no action is taken, the hidden field translates to <input type="hidden" name="time" id="time" value="{:id=>&quot;q1-hf&quot;}"> in html, which may or may not be a problem.

And have tried several ways to replace the console.log statement in the javascript and assign a value to the hidden field based on which div is .active .

First, document.getElementById("q1-hf").value = 1; which receives a console error saying new:200 Uncaught TypeError: Cannot set property 'value' of null

Alternatively, $('#q1-hf').val(1); generates no console errors, but also does not change the hidden_field_tag value.

Can anyone help me get this working? I'm open to other structures that accomplish the same goal, but I have looked at other posts like this or this that seem to say this should be possible.

Answer 1

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

This code is making a hidden input with id="time" , so you should select it by document.getElementById("time")

---

If you want the id to be "q1-hf", then you should change it to <%= hidden_field_tag 'q1-hf' %>

It will be rendered as <input name="q1-hf" id="q1-hf" type="hidden"> and you can access it the way you described in your question.