title: jQuery need to set variable's value from the value of a form input box
body: <p>I am looking to grab the value of a form input.</p>
  
  <p>I think my problem is on this line:</p>
  
  <pre><code>    var vid = $(this).next(".pid").val();
  </code></pre>
  
  <p>I need to send the value of the input box named 'pid' to a php page, however there are several forms on the page, all with input boxes named 'pid'. When i merely have:</p>
  
  <pre><code>next(".pid").val();
  </code></pre>
  
  <p>the value that is sent is from another form on the page. </p>
  
  <p><strong>Edit:</strong>
  All I am really trying to do is set the "data" to be an array of all of the data in the form. So if there is a better way to set the "formdata" variable to the id of the form, that would work too.</p>
  
  <p>Below is the jQuery function:</p>
  
  <pre><code>$(".varSel").live("change", function(){
      var vid = $(this).next(".pid").val();
      var formdata = $('form#addToCart'+ vid).serialize();
      $.ajax({
          type: "POST",
          url: "library/varPrice.php",
          data: formdata,
          success: function(html){
          $('.price').html(html);
        }
      });
  });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Below is a form:</p>
  
  <pre><code>&lt;form name='addToCart' id='addToCart99' action='cart.php?action=add' method='post'&gt;
      &lt;ul class='vars' id='varlist_p99'&gt;
          &lt;li&gt;
          &lt;label for="color"&gt;color&lt;/label&gt; 
          &lt;select id="color" name="color" class='varSel'&gt;
              &lt;option&gt;blue&lt;/option&gt;
              &lt;option&gt;green&lt;/option&gt;
              &lt;option&gt;red&lt;/option&gt;
          &lt;/select&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
          &lt;label for="size"&gt;size&lt;/label&gt; 
          &lt;select id="size" name="size" class='varSel'&gt;
              &lt;option&gt;large&lt;/option&gt;
              &lt;option&gt;small&lt;/option&gt;
          &lt;/select&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
              &lt;div class='price'&gt;
                  $$
              &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;
                  &lt;input type='hidden' value='99' name='pid'&gt; 
                  &lt;input type='submit' class='buynow' value=''&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>