title: How can I create a Javascript alert from the input values of the form a user interacts with?
body: <p>I want to create a dynamic alert from a specific input value within each form. I have many forms on a page. Each alert needs to be slighly different. I am using two of the forms input values to produce the custom message. <code>&lt;input type="hidden" name="on0" value="Size"&gt;</code> &amp; <code>&lt;input type="hidden" name="on1" value="Color"&gt;</code>. I have the alert working for the first form on the page, but after the second form, my alert does not match the selected input value of that form. How can I target a specific instance of these input values within the form a user interacts with? </p>
  
  <p>Here is a simplified version of my code showing only two forms:
  <a href="http://jsfiddle.net/rdesigns/7YJ63/4/" rel="nofollow">example on - jsfiddle</a></p>
  
  <pre><code>&lt;form method="post" class="list1"&gt;
  &lt;input type="hidden" name="on0" value="Size"&gt;
  &lt;select name="os0"&gt;
  &lt;option value=""&gt;-- Choose a Size --&lt;/option&gt;
  &lt;option value="Short"&gt;Short&lt;/option&gt;
  &lt;option value=" Medium"&gt;Medium&lt;/option&gt;
  &lt;option value=" Long"&gt;Long&lt;/option&gt;                             
  &lt;/select&gt;
  &lt;input type="hidden" name="on1" value="Color"&gt;
  &lt;select name="os1"&gt;
  &lt;option value=""&gt;
  -- Choose a Color --
  &lt;/option&gt;
  &lt;option value="ivory"&gt;ivory&lt;/option&gt; &lt;option value=" black"&gt; black&lt;/option&gt; 
  &lt;/select&gt; 
  &lt;input type="button" value="Add to Cart" class="catalog"&gt;                    
  &lt;/form&gt;
  &lt;!-- seconed form start --&gt; 
  &lt;hr /&gt;
  &lt;form method="post" class="list2"&gt;
  &lt;input type="hidden" name="on0" value="Option"&gt;
  &lt;select name="os0"&gt;
  &lt;option value=""&gt;-- Choose a Option --&lt;/option&gt;
  &lt;option value="Option 1"&gt;Option 1&lt;/option&gt;
  &lt;option value="Option 2"&gt;Option 2&lt;/option&gt;
  &lt;option value="Option 3"&gt;Option 3&lt;/option&gt;                             
  &lt;/select&gt;
  &lt;input type="hidden" name="on1" value="Accent Color"&gt;
  &lt;select name="os1"&gt;
  &lt;option value=""&gt;
  -- Choose a Choose a Accent Color --
  &lt;/option&gt;
  &lt;option value="red"&gt;Red&lt;/option&gt;
  &lt;option value="yellow"&gt;yellow&lt;/option&gt; 
  &lt;option value="orange"&gt;orange&lt;/option&gt;   
  &lt;/select&gt; 
  &lt;input type="button" value="Add to Cart" class="catalog"&gt;                    
  &lt;/form&gt;
  </code></pre>
  
  <p>​​
  And my js</p>
  
  <pre><code>$(document).ready(function(){
  
      var size_x = $("input[name='on0']").val();
      var color_x = $("input[name='on1']").val();
  
      function popWarning() {
          if ($("select[name='os0']").val() === "") {
              alert('Please choose a ' + size_x);
              return false;
          }   
          if ($("select[name='os1']").val() === "") {
              alert('Please choose a ' + color_x);
              return false;
          }
      }
      $("input.catalog").click(function() {
          popWarning();
      });​
  });
  </code></pre>