how to upload image with other form elements with ajax jquery form submit

Question

UPDATE 10/16
Updated HTML
Updated AJAX

Attached

Issue: 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...

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.

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...

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.

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.

html (please forgive the inline styles...I haven't yet finished my CSS files)

<div style="position: relative; float: left; width:275px;">
<div id="valuebox" style="position: relative; float: left; width:275px; border: solid #0096D6; border-width: 1px; padding: 10px;">
<H2>Step 3: Enter Value Level Data</H2>
 <form enctype="multipart/form-data">
 <span style="position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;">
<p>Add Value Challenger Screenshot:</p>
<input id="file" type="file" name="valueimage">
</span>
<span style="float: left; clear: right; margin-top:8px; padding-top: 10px; width: 235px;">
<label class="fieldlabel"><span>Value Lift (%):</span></label></br>
 <input id="valuelift" type="text" name="valuelift" class="textfieldshadowsmall" style="width: 150px;">
</span>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<input id="valuesignificant" type="checkbox" name="valuesignificant" value="1">Significant?
</span>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<input id="valuewinningcreative" type="checkbox" name="valuewinningcreative" value="1">Winning Creative?
</span>
 </form>
</div>
<span style="position: relative; float: left; margin-top: 25px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif;">
<a href="#" id="valuesubmit" />+ add another value</a>
</span>
</form>
</div>

jquery/ajax

$(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
});
});
});

php

//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";
}

Answer 1

Try this

$(function(){
    $('#valuesubmit').click(function(event) {
        var formData = new FormData($('form')[0]); // okay I just saw the form, assuming there is only one form on the page
        $.ajax({
            url: 'post_value_dummy.php',  //Server script to process data
            type: 'POST',
            /* This is just looks like bloat
            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',  <-- don't do this       
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            //cache: false, post requests aren't cached
            contentType: false,
            processData: false
        });
    });
});