title: AJAX: Passing Variable Along Specific Button Click
body: <p>I have two buttons where each button do the same function but one variable. I'm using ajax to handle some PHP. I'm thinking the problem is that the ajax is being run before the js function. </p>
  
  <p>Do you have any solutions for passing a parameter along the specific button click?</p>
  
  <pre><code>$('.button').click(function(){      
      $.ajax({
          type: "POST",
          data: {
              userid: &lt;?php echo $userid ?&gt;,
              upgradePrice: price,
              resource: upgResource
          },
          url: "UpgradeResHandler.php",
          dataType: "json",
          async: true,
          beforeSend: function(){
              $(".ajaxTest").text("Trying to upgrade...");
          },
          success: function(data) {
              $(".ajaxTest").text(data.a);
              if (data.b == "true") {
                  location.reload();
              }
          }
      }); 
  });
  
  function setResource(resource) {
      var upgResource = resource;
  }
  
  &lt;input type="submit" class="button" name="upgGold" value="Upgrade" onclick="setResource('gold')" /&gt;
  &lt;input type="submit" class="button" name="upgMetal" value="Upgrade" onclick="setResource('metal')" /&gt;
  </code></pre>