title: Using Javascript/JQuery to Set Rails `hidden_field_tag` Value
body: <p>I'm trying to use javascript or jquery to make my app recognize whichever <code>div</code> has a class of <code>active</code> as the value for a <code>hidden_field_tag</code> in my erb <code>form_for</code>.  So far I have the following structure set up and working:</p>
  
  <pre><code>&lt;div id="q1" class="row gen-quest-div"&gt;
      &lt;h1&gt;How long do you have?&lt;/h1&gt;
      &lt;div class="row answers"&gt;
        &lt;div id="q1-15" class="answer q1-answer col-xs-6 col-sm-3"&gt;
          &lt;%= image_tag 'min-15.jpg', alt: "Put 15 minutes on the clock!" %&gt;
          &lt;p&gt;15 Minutes&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="q1-30" class="answer q1-answer col-xs-6 col-sm-3"&gt;
          &lt;%= image_tag 'min-30.jpg', alt: "Put 30 minutes on the clock!" %&gt;
          &lt;p&gt;30 Minutes&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="q1-45" class="answer q1-answer col-xs-6 col-sm-3"&gt;
          &lt;%= image_tag 'min-45.jpg', alt: "Put 45 minutes on the clock!" %&gt;
          &lt;p&gt;45 Minutes&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="q1-60" class="answer q1-answer col-xs-6 col-sm-3"&gt;
          &lt;%= image_tag 'min-60.jpg', alt: "Put 60 minutes on the clock!" %&gt;
          &lt;p&gt;60 Minutes&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- answers row --&gt;
    &lt;/div&gt; &lt;!-- question div --&gt;
  
  &lt;div class="btn-primary" id="pre-submit"&gt;Pre Submit&lt;/div&gt;
  
  &lt;script&gt;
  // 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.");  // &lt;&lt;&lt;&lt;THIS LINE
        }
    }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>This successfully selects a <code>div</code> by marking it <code>.active</code> when it is clicked and prints the <code>console.log</code> 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:</p>
  
  <pre><code>  &lt;%= form_for @generator do |f| %&gt;
        &lt;div id="q1-form-field"&gt;
          &lt;%= hidden_field_tag :time, id: "q1-hf" %&gt;
        &lt;/div&gt;
        ...
        &lt;div class="text-center"&gt;
          &lt;h3&gt;&lt;%= f.submit "Submit" %&gt;&lt;/h3&gt;
        &lt;/div&gt;
    &lt;% end %&gt;
  </code></pre>
  
  <p>When no action is taken, the hidden field translates to <code>&lt;input type="hidden" name="time" id="time" value="{:id=&gt;&amp;quot;q1-hf&amp;quot;}"&gt;</code> in html, which may or may not be a problem.</p>
  
  <p>And have tried several ways to replace the <code>console.log</code> statement in the javascript and assign a value to the hidden field based on which <code>div</code> is <code>.active</code>.</p>
  
  <p>First, <code>document.getElementById("q1-hf").value = 1;</code> which receives a console error saying <code>new:200 Uncaught TypeError: Cannot set property 'value' of null</code></p>
  
  <p>Alternatively, <code>$('#q1-hf').val(1);</code> generates no console errors, but also does not change the <code>hidden_field_tag</code> value.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/9965503/change-value-of-hidden-field-tag-with-js-prototype-rails-3">this</a> or <a href="https://stackoverflow.com/questions/6597444/setting-a-form-variable-value-before-submitting">this</a> that seem to say this should be possible.</p>