POST to php via AJAX with json data

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

Unless the form fields contain JSON data, you shouldn't be calling `json_decode()`. — Barmar, Oct 12 '13 at 19:06
first part I thing submit is not submitting. I'm also not sure in PHP how to get the $_POST if that gets the full json or can be separated by element? — BarclayVision, Oct 12 '13 at 19:08
do I need to json_encode form_data? or just use the string that is sent? — BarclayVision, Oct 12 '13 at 19:12
It looks like you're creating lots of duplicate IDs in your `$.each()` loop. IDs have to be unique. You should use classes instead. And to bind an event handler to dynamically-created elements, you need to use delegation with `.on()`. — Barmar, Oct 12 '13 at 19:24
can you give an example? I'm very new to jquery and not real sure of proper format. — BarclayVision, Oct 12 '13 at 19:26
See http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Oct 12 '13 at 20:19
`$("#makecollapsible .makecollapsibleul .productForm").on("click", ".submit", function(event){ alert($(this).text()); });` Don't think I have it in the right elements? — BarclayVision, Oct 12 '13 at 20:36
`$(document).on("click", ".submit", function(event){ alert($(this).text()); });` fixed the click event problem, - I'll start a new question because now the FDID that is showing as the parameter is from the first element in the collapsible and not the one clicked...? Could it be because I'm using $(document) and not the lower levels? — BarclayVision, Oct 12 '13 at 22:26

score 3 · Accepted Answer · answered Oct 12 '13 at 19:13

3

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

answered Oct 12 '13 at 19:13

Barmar

741,623
53
500
612

ok, can't check this until submit is working... updated code above to show more... – BarclayVision Oct 12 '13 at 19:21
seems like the issue is the submit button is wrapped in the collapsible element and I think that may have something to do with it? tried the: '$(".save").click(function(e) { e.preventDefault(); // your code });' by itself and nothing... – BarclayVision Oct 12 '13 at 20:17

nietonfir · Answer 2 · 2013-10-12T19:54:23.700

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

POST to php via AJAX with json data

2 Answers2