POST to php via AJAX with json data - php

Question

Trying to post textbox values to database via json .getJSON - at this point I'm just trying to see if the json post to the page, I have the UPDATE query working fine...
following is not posting as desired:
CODE:
$(document).on("click", ".submit", function(event){
alert($(this).text());
var form_data = {
FDID: $('.fdid-1').val(),
CHOICE1: $('.choice-1').val(),
CHOICE2: $(".choice-2").val()
};
$.getJSON("modify.php",form_data,function(data){
switch(data.retval){
case 0: $("#status").html("Update successful!");
break;
case 1: $("#status").html("Unable to update!");
break;
default: $("#description").html("Database error, please try again.");
break;
}
});
});
modify.php:
<?php
header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");
$fdid = json_decode($_POST['FDID']);
$choice1 = json_decode($_POST['CHOICE1']);
var_dump($choice1);
// This is in the PHP file and sends a Javascript alert to the client
$message = $fdid;
echo "<script type='text/javascript'>alert('$message');</script>";
?>
MORE of CODE:
$.each( data, function ( i, val ) {
($('<div>')
.attr({
'data-role': 'collapsible',
'data-content-theme': 'c',
'data-collapsed': 'true',
'id': 'cResults'
})
.html('<h4>' + this.LastName + ', ' + this.FirstName + '</h4>'
+ '<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Choices..." data-inset="true" class="makecollapsibleul">'
+ '<li><form id="productForm" action="modify.php" method="post">'
+ '<label for="fdid-1">FDID:</label>'
+ '<input type="text" name="fdid-1" class="fdid-1" value=' + this.FDID + '>'
+ '</li><li>'
+ '<label for="text-1">Choice 1:</label>'
+ '<input type="text" name="choice-1" class="choice-1" value=' + this.C1 + '>'
+ '</li><li>'
+ '<label for="text-2">Choice 2:</label>'
+ '<input type="text" name="choice-2" class="choice-2" value=' + this.C2 + '>'
+ '</li><li>'
+ 'IP: ' + this.IPADDRESS + '</li><input type="submit" class="submit" value="UPDATE" /></form><li>'
+ 'Pick Date: ' + this.PICKDATE + '</li>'
+ '</ul>'))
.appendTo('#primary');
//$(".title").append('<li>'+orderNum+' -- '+itemNum+'</li>');
$('#makecollapsible').collapsibleset().trigger('create');
$.mobile.hidePageLoadingMsg();

Answer 1

You should not be calling json_encode() to get the parameters. They're sent using www-form-urlencoded format, and PHP takes care of decoding them.
You need to call json_encode to encode the result you want to send back.
<?php
header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");
$fdid = $_POST['FDID'];
$choice1 = $_POST['CHOICE1'];
//var_dump($choice1);
// This is in the PHP file and sends a Javascript alert to the client
$message = $fdid;
$result = array('retval' => 0,
'code' => "<script type='text/javascript'>alert('$message');</script>");
echo json_encode($result);
?>

Answer 2

You know that $.getJson() does, according to the documentation,
Load JSON-encoded data from the server using a GET HTTP request.
So you won't find any values in $_POST. Use $_GET or $_REQUEST to get your data.
Just noticed that you don't have an element with id="save" but one with class="save". As submit events are only fired by <form> elements, try to attach a click callback to your button like this:
$(".save").click(function(e) {
e.preventDefault();
// your code
});