用户的Facebook详细信息未被收到隐藏字段

Question

I'm using the facebook javascript sdk to get a logged in user's public data. What I want to do is bind the values to hidden field in the form and when submitted, get the values in a php file which will insert into MySQL database. But when I submit the form, there are no values. Why is that? If I need to provide more info, please let me know. When I login, I can see my facebook name and profile pic on the web app.

//Hidden fields within form

<input type="hidden" name="hdnFacebookId" id="hdnFacebookId" value="">
<input type="hidden" name="hdnUsername" id="hdnUsername" value="">
<input type="hidden" name="hdnFirstName" id="hdnFirstName" value="">
<input type="hidden" name="hdnLastName" id="hdnLastName" value="">
<input type="hidden" name="hdnFacebookImg" id="hdnFacebookImg" value="">
<input type="hidden" name="hdnFacebookUrl" id="hdnFacebookUrl" value="">
<br/>
<input type="submit" id="submit" onclick="setValues()" data-theme="b" value="Submit" class="ui-btn-hidden" aria-disabled="false">

<script>
function updateUserInfo(response) {
 FB.api('/me', function(response) {
   document.getElementById('myFacebookImg').src = "https://graph.facebook.com/" + response.id + "/picture";
   document.getElementById('myFacebookName').innerHTML = response.name;

   function setValues(){
        document.postAJourneyForm.hdnFacebookId.value = response.id;
        document.postAJourneyForm.hdnUsername.value = response.username;
        document.postAJourneyForm.hdnFirstName.value = response.first_name;
        document.postAJourneyForm.hdnLastName.value = response.last_name;
        document.postAJourneyForm.hdnFacebookImg.value = "https://graph.facebook.com/" + response.id + "/picture";
        document.postAJourneyForm.hdnFacebookUrl.value = "http://graph.facebook.com/" + response.username;
        //document.forms["postAJourneyForm"].submit();
   }
 });

}

//php file that gets the data to post to database
//I check in the code if it is empty before I can execute the query
//but it is always empty
//get the facebook data
$hdnFacebookId = $_POST['hdnFacebookId'];
$hdnUsername = $_POST['hdnUsername'];
$hdnFirstName = $_POST['hdnFirstName'];
$hdnLastName = $_POST['hdnLastName'];
$hdnFacebookImg = $_POST['hdnFacebookImg'];
$hdnFacebookUrl = $_POST['hdnFacebookUrl'];


//Updated with JSON
<script>
function updateUserInfo(response) {
 FB.api('/me', function(response) {
   document.getElementById('myFacebookImg').src = "https://graph.facebook.com/" + response.id + "/picture";
   document.getElementById('myFacebookName').innerHTML = response.name;
   document.getElementById('facebookUrl').href = "https://www.facebook.com/" + response.username;

   var JSONObject = {
    "facebookId":response.id,
    "facebookName":response.username,
    "facebookFirstName":response.first_name,
    "facebookLastName":response.last_name
   };
   document.getElementById('hdnFacebookId').innerHTML = JSONObject.facebookId;
   document.getElementById('hdnUsername').innerHTML = JSONObject.facebookName;
   document.getElementById('hdnFirstName').innerHTML = JSONObject.facebookFirstName;
   document.getElementById('hdnLastName').innerHTML = JSONObject.facebookLastName;
   document.getElementById('hdnFacebookImg').innerHTML = JSONObject.facebookImage;
   document.getElementById('hdnFacebookUrl').innerHTML = JSONObject.facebookUrl;


 });
}
</script>

Answer 1

To set values.

$('#hdnFacebookId').val(response.id);
$('#hdnUsername').val(response.username);
$('#hdnFirstName').val(response.first_name);
$('#hdnLastName').val(response.last_name);
$('#hdnFacebookImg').val('https://graph.facebook.com/' + response.id + '/picture');
$('#hdnFacebookUrl').val('http://graph.facebook.com/' + response.username);