title: Using hidden input to send extra data with Ajax
body: <p>Currently I'm using hidden inputs to send some extra values with Ajax when a user submits a form. The reason I'm using hidden values is because I can have a long list with textfields an assigned button to each textfield. With every button click I have to send the value in the textfield plus some extra values.</p>
  
  <p>The problem is that anyone can inspect the code in Chrome (for example) and change the values in the hidden field. Is there any better way of doing this?</p>
  
  <hr>
  
  <p>EDIT: Added some code to better illustrate my problem</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="textfield" name="value1" value="Default value for textfield" /&gt;
      &lt;input type="hidden" class="hiddenValue" name="hiddenSuperSecretValue" value="superSecret" /&gt;
      &lt;button class="submitButton"&gt;Submit&lt;/button&gt;
  
      &lt;input type="textfield" name="value2" value="Default value for textfield" /&gt;
      &lt;input type="hidden" class="hiddenValue" name="hiddenSuperSecretValue" value="superSecret" /&gt;
      &lt;button class="submitButton"&gt;Submit&lt;/button&gt;
      ... more fields ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.submitButton').click(function(){
      dataVar = "someValue" = $(this).closest('.hiddenValue').val();
      $.ajax({
          type: "POST",
          url: "/submitAjaxStuff.php",
          data: dataVar,
          cache: false,
          success: function(response){
              doSomething(response);
          }
      });
  });
  </code></pre>