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
– Barmar, Commented Oct 12, 2013 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
– BarclayVision, Commented Oct 12, 2013 at 19:08
do I need to json_encode form_data? or just use the string that is sent? — BarclayVision
– BarclayVision, Commented Oct 12, 2013 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
– Barmar, Commented Oct 12, 2013 at 19:24

Barmar · Accepted Answer · 2013-10-12 19:13:37Z

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, 2013 at 19:13

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BarclayVision Over a year ago

ok, can't check this until submit is working... updated code above to show more...

BarclayVision Over a year ago

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...

nietonfir · Accepted Answer · 2013-10-12 19:54:23Z

0

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

edited Oct 12, 2013 at 19:54

answered Oct 12, 2013 at 19:36

nietonfir

4,8916 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

POST to php via AJAX with json data

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related