User's facebook details not being received into hidden fields - php

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);