title: how to upload image with other form elements with ajax jquery form submit
body: <p><strong>UPDATE 10/16</strong><br>
  Updated HTML<br>
  Updated AJAX<br></p>
  
  <p>Attached <img src="https://i.stack.imgur.com/qPIfc.jpg" alt="screenshot">
  <img src="https://i.stack.imgur.com/DJUtF.jpg" alt="screenshot2"></p>
  
  <p><strong>Issue:</strong> The form technically "submits", however a) my form no longer refreshes itself which tells me my php file is not being called/executed properly and b) the info is not being posted to the DB.  I think this has to do something with the conten-type: false, but I am not completely sure...</p>
  
  <p>Let me start by saying, I've read and read about how to go about doing this.  Some posts I've read this can't be done and then others prove them wrong.  I tried to implement some examples, but for some reason all of the examples laid out do not work for me.  I thought I'd see if someone can solve my specific issue.</p>
  
  <p>Essentially, I have a semi-html/jquery form that I post via AJAX.  I did this because a) I essentially have 3 separate forms (not shown in this example) on the page and b) I need to return the same form to the page without reloading the page...</p>
  
  <p>My problem is that when I select my image and click on my button, the ajax DOES NOT send the image to PHP, although it does send the other fields.  What am I doing wrong here?  Any updates to my code would be most useful as again, I've attempted to implement several different answers in the past with no luck.</p>
  
  <p>Any assistance would be MUCH MUCH appreciated.  I am on the cusp of finishing this project and this is one of two major barriers for me.</p>
  
  <p><strong>html</strong> (please forgive the inline styles...I haven't yet finished my CSS files)</p>
  
  <pre><code>&lt;div style="position: relative; float: left; width:275px;"&gt;
  &lt;div id="valuebox" style="position: relative; float: left; width:275px; border: solid #0096D6; border-width: 1px; padding: 10px;"&gt;
  &lt;H2&gt;Step 3: Enter Value Level Data&lt;/H2&gt;
   &lt;form enctype="multipart/form-data"&gt;
   &lt;span style="position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;"&gt;
  &lt;p&gt;Add Value Challenger Screenshot:&lt;/p&gt;
  &lt;input id="file" type="file" name="valueimage"&gt;
  &lt;/span&gt;
  &lt;span style="float: left; clear: right; margin-top:8px; padding-top: 10px; width: 235px;"&gt;
  &lt;label class="fieldlabel"&gt;&lt;span&gt;Value Lift (%):&lt;/span&gt;&lt;/label&gt;&lt;/br&gt;
   &lt;input id="valuelift" type="text" name="valuelift" class="textfieldshadowsmall" style="width: 150px;"&gt;
  &lt;/span&gt;
  &lt;span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;"&gt;
  &lt;input id="valuesignificant" type="checkbox" name="valuesignificant" value="1"&gt;Significant?
  &lt;/span&gt;
  &lt;span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;"&gt;
  &lt;input id="valuewinningcreative" type="checkbox" name="valuewinningcreative" value="1"&gt;Winning Creative?
  &lt;/span&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  &lt;span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;"&gt;
  &lt;a href="#" id="valuesubmit" /&gt;+ add another value&lt;/a&gt;
  &lt;/span&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jquery/ajax</strong></p>
  
  <pre><code>$(function(){
    $('#valuesubmit').click(function(event) {
  var formData = new FormData($('form')[0]);
  
  $.ajax({
      url: 'post_value_dummy.php',  //Server script to process data
      type: 'POST',
      xhr: function() {  // Custom XMLHttpRequest
          var myXhr = $.ajaxSettings.xhr();
          //if(myXhr.upload){ // Check if upload property exists
             // myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
          //}
          return myXhr;
      },
      // Form data
      enctype: 'multipart/form-data',
      data: formData,
      //Options to tell jQuery not to process data or worry about content-type.
      cache: false,
      contentType: false,
      processData: false
  });
  });
  });
  </code></pre>
  
  <p><strong>php</strong></p>
  
  <pre><code>//This is the directory where images will be saved
  $target = "/screenshots/";
  $target = $target . basename($_FILES[valueimage][name]);
  
  $picchallengervalue=($_FILES['valueimage']['name']);
  
  
  $con=mysqli_connect("x","y","z","a");
  // Check connection
  if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
  
  
  $sql="INSERT INTO value (valueimage, valuelift, valuesignificant, valuewinningcreative, variableid)
  VALUES
  ('$picchallengervalue','$_POST[valuelift]','$_POST[valuesignificant]','$_POST[valuewinningcreative]','$_POST[variableid]')";
  
  
  //some php that sends the same form back to the browser - code not necessary to show
  
  if(move_uploaded_file($_POST[valueimage][tmp_name], $target))
  {
  echo "ok";
  }
  </code></pre>