title: Using jQuery to change hidden field value based on select value
body: <p>I am trying to change a hidden form value based on what the user selects from a drop down menu.</p>
  
  <p>Here is my jQuery code:</p>
  
  <pre><code>$("#color").change(function() {
      if ($(this).val() == "black" ) {
          $("#id").val("21");
      } else if ($(this).val() == "white" ) {
          $("#id").val("22");
      }
  });
  </code></pre>
  
  <p>Here is my form html:</p>
  
  <pre><code>&lt;form class="addToCart" id="addToCart" name="addToCart" action="/cart/add"&gt;
      &lt;input type="hidden" id="id" name="id" value="21"&gt;
      &lt;input type="hidden" id="name" name="name" value="Tank Top"&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="2"&gt;
          &lt;tr&gt;
              &lt;td align="center"&gt;&lt;span class="pink-font"&gt;Color&lt;/span&gt;&lt;/td&gt;
              &lt;td align="center"&gt;&lt;span class="pink-font"&gt;Size&lt;/span&gt;&lt;/td&gt;
              &lt;td align="center"&gt;&lt;span class="pink-font"&gt;Qty&lt;/span&gt;&lt;/td&gt;
              &lt;td align="center"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td align="center"&gt;
                  &lt;select id="color" name="color"&gt;
                      &lt;option value="black" selected="selected"&gt;Black&lt;/option&gt;
                      &lt;option value="white"&gt;White&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
  </code></pre>
  
  <p>Can anybody point me in the right direction. I can't seem to get it to work.</p>