AJAX jquery移动php表单提交不刷新不更新

Question

I feel like I'm trying to do the most basic background form submission using AJAX (to php/mySQL) and just cannot get it to work. I've probably spend 15 hours searching and trying different combinations, but can't get my site to work.

Basically what happens is a user types into a form two pieces of data - a name and a team. He also selects a photo from the camera's library. Then a javascript function submitForm() reads the data from the form and submits it to upload2.php , which stores the text fields and a link to the photo in a mySQL database. It also saves the photo upload.

All of that works correctly. What doesn't is that after submission, the fields are returned to their previous values (before submission). This confuses the user, as it looks like his changes didn't go through.

However, they do go through - he just has to manually hit refresh to view them on the page. This seems like the simplest of questions, but I have been completely unable to solve for it.

Here is the javascript:

function submitForm() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("label", "WEBUPLOAD");
        $.ajax({
          url: "upload2.php",
          type: "POST",
          data: fd,
          cache: false,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }

And here is the php:

if ($_POST["label"]) {
include 'config.php';
$label = $_POST["label"];
$uid = $_POST["uid"];
echo "uid=" . $uid;
$fullname = addslashes($_POST["fullname"]);
$pairingID = $_POST["pairingID"];
$query = "update usertable set fullname ='$fullname', pairingID = $pairingID where id = $uid";
echo $query;
//run update query
mysql_query($query,$dbconnection) or print "DB ERROR: ".mysql_error($dbconnection);     

if ($_FILES["file"]) {
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2000000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = time(). $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("upload/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "upload/" . $filename);
            echo "Stored in: " . "upload/" . $filename;
            echo "fullname=" . $fullname;
            $imgurl = "upload/" . $filename;
            include 'config.php';
            $time_stamp = date('Y-m-d H:i:s');
            //$uname = trim($_POST["uname"]);
            //update tblFeed

            $query = "update usertable set selfie = '$imgurl' where id = $uid";
            echo $query;
            //run update query
            mysql_query($query,$dbconnection) or print "DB ERROR: ".mysql_error($dbconnection);     


        }
    }
} else {
    echo "Invalid file";
    echo "filetype:" . $_FILES["file"]["type"];
    echo "filesize:" . $_FILES["file"]["size"];
}               
}
}

And here is the html form:

<form method="post" id="fileinfo" name="fileinfo">
    <label>Name:</label>
    <input type="text" style="max-width: 80%" name="fullname" value="temp" id="fullname" />
    <input type="hidden" name="uid" value="44" id="uid" />
    <label>Selfie:</label><br>
    <img style="width:50px;" src="" />
    <input type="file" name="file" style="max-width:80%;"/><br/>Today's pairing:</br>

<select name="pairingID" id="pairingID">Day 1<ul data-role="listview" data-inset="true"><option selected value="1">Andy/Mark (Day 1)</option><option value="2">Cory/Adam (Day 1)</option><option value="3">Morgan/Brandon (Day 1)</option><option value="4">John/Phil (Day 1)</option><option value="5">Casey/Kyle (Day 1)</option><option value="6">Foskey/Taylor (Day 1)</option><option value="7">Clint/James (Day 1)</option><option value="8">Matt/Desha (Day 1)</option><option value="9">Ross/Ryan H (Day 1)</option><option value="10">Ryan V/Dan (Day 1)</option><option value="11">Rene/JZ (Day 1)</option><option value="12">AD/Jake (Day 1)</option></ul>Day 2<ul data-role="listview" data-inset="true"><option value="13">Andy/Mark (Day 2)</option><option value="14">Cory/Adam (Day 2)</option><option value="15">Morgan/Phil (Day 2)</option><option value="16">John/Brandon (Day 2)</option><option value="17">Foskey/Kyle (Day 2)</option><option value="18">Casey/Taylor (Day 2)</option><option value="19">Matt/James (Day 2)</option><option value="20">Clint/Desha (Day 2)</option><option value="21">Dan/Ryan H (Day 2)</option><option value="22">Ross/Ryan V (Day 2)</option><option value="23">AD/Rene (Day 2)</option><option value="24">JZ/Jake (Day 2)</option></select>

Answer 1

Formatting in these comments is lacking for sure!! So I'm hoping over to one of these 'answers' sections...

Short answer: I'd use JSON.

For example, maybe have your PHP return JSON (json_encode()) where the keys of the array match the id's of your HTML. Then use jQuery's JSON 'parser' ( http://api.jquery.com/jquery.parsejson/ ) to get a JS Object. Loop over this object and put the 'value' into each element in your form (identified by id).

You could even throw in an 'extra' element in your JSON that includes 'other-stuff' to tell the user.

Something like:

PHP:
$json_array = array('fullname'=>$fullname, 'pairingID'=>$pairingID);
echo jsone_encode($json_array);

Then in your JS something like:

var items = $.parseJSON(data);
// error checking stuff here
$("#fullname").val(items.fullname);
// can't remember how to select an item by value in JS at the moment, but do that here with items.pairingID being the 'value' to 'select'.