title: Passing html input value to PHP using AJAX
body: <p>I am uploading images using ajax. Since I have a <code>table</code> that lists the records, there are more than one rows and I can't add images except first row's ID. I probably have to give my function a parameter, but I couldn't figure out how to implement it to the ajax part.</p>
  
  <p>What I want to do is to POST <code>thing_id</code> value to my php form while uploading images.</p>
  
  <p>I <strong>updated</strong> the question, see details.</p>
  
  <p>Here's how I activate my modal.</p>
  
  <pre><code>&lt;a class="btn btn-warning btn-sm" data-toggle="modal" 
  data-target="#image-edit&lt;?php echo $row['thing_id']; ?&gt;"&gt;&lt;span
  class="glyphicon glyphicon-camera" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>My modal (You wanted more details, so I am posting the whole modal.</p>
  
  <pre><code>&lt;div class="modal fade" id="image-edit&lt;?php echo $row['thing_id']; ?&gt;" tabindex="-1" role="dialog"
       aria-labelledby="myModalLabel&lt;?php echo $row['thing_id']; ?&gt;" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span
                        aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel&lt;?php echo $row['thing_id']; ?&gt;"&gt;Add Photos&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;!-- image upload area start--&gt;
                  &lt;div class="addabook"&gt;
                      &lt;div class="new-entry-main"&gt;
                          &lt;form enctype="multipart/form-data" class="myform"&gt;
                              &lt;div class="bookcoverdiv"&gt;
                                  &lt;p&gt;Book Cover&lt;/p&gt;
                                  &lt;input type="file" name="images[]" id="&lt;?php echo $row['thing_id']; ?&gt;" multiple&gt;
                                  &lt;input type="hidden" id="secret&lt;?php echo $row['thing_id']; ?&gt;" name="thing_id" value="&lt;?php echo $row['thing_id']; ?&gt;"&gt;
                                  &lt;button type="button" onclick="imageupload(&lt;?php echo $row['thing_id']; ?&gt;)" value="&lt;?php echo $row['thing_id']; ?&gt;" class="uploadimages btn btn-primary"&gt;Save changes
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                          &lt;hr&gt;
                          &lt;div class="content_here_please"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;?php // I list previously uploaded images here. They appear, so my modal works. ?&gt;
              &lt;/div&gt;
              &lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>        function imageupload(thing_id) {
          var form = new FormData($('.myform')[0]);
          form.append('thing_id', thing_id);
          // Make the ajax call
          $.ajax({
              url: 'uploadimages.php',
              type: 'POST',
              xhr: function () {
                  var myXhr = $.ajaxSettings.xhr();
                  if (myXhr.upload) {
                      myXhr.upload.addEventListener('progress', progress, false);
                  }
                  return myXhr;
              },
              //add beforesend handler to validate or something
              //beforeSend: functionname,
              success: function (res) {
                  $('.content_here_please').html(res);
              },
              //add error handler for when a error occurs if you want!
              //error: errorfunction,
              data: form,
              cache: false,
              contentType: false,
              processData: false
          });
      }
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>$get_id = $_POST['thing_id'];
  echo $get_id; // it echoes the id number of the record when I click the anchor, but there is something weird. I list 10 records each page. If I try to make a change on the 2nd or 3rd record, all modals show $get_id value.
  </code></pre>
  
  <p>Proof : <img src="https://i.stack.imgur.com/hIC41.png" alt="http://i.imgur.com/gz2Wf60.png"></p>