0

I have the following code snippet below. When the "Create Order" button is clicked, the user inputted data (not shown in the code) is converted to JSON, via the function "convertToJson". I am able to convert the data to JSON. My problem is passing the JSON object to PHP so that I can insert the object to the database. PHP is returning a "Null" value when I run $var_dump.

Note that I am trying to POST to the same page, which is "orders.php"

     <head>
        <script type="text/javascript">
        function convertToJson()
        {
            var tableData = $('#productOrder').tableToJSON({
            ignoreColumns: [0]
            }); 

            var xhr = new XMLHttpRequest();
            xhr.open("GET","orders.php",true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(tableData));            
        }   
        </script>
     </head>
    ...more code...     

    <button type="button" class="btn btn-success btn-md" style="float: right;" onclick="convertToJson();">Create Order</button>
    <div>
    <?php
        $data = json_decode(file_get_contents('php://input'));
        var_dump($data);

    ?>
    </div>
wowomg
  • 33
  • 5

1 Answers1

1

you should use an actual ajax request to do post your data

        $.ajax({
            url: 'yourscript',
            type: 'POST',
            data: { data: tableData }
            dataType: "json",
            beforeSend: function() {
              //do something
            }
        }).done(function(msg){
            //do something when done
        }).fail(function(msg){
            //error handling
        }).complete(function(msg){
            //do something when completed
        });

    }

and get the data with $_POST["data"]

also note that as stated before you need to take care of your script lifecycle as you are now working with async requests

SteVoi
  • 17
  • 5
  • is it possible to post to the same page? – wowomg Mar 26 '16 at 13:09
  • @wowomg No, posting to the same page results in [this](http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843) – cssyphus Mar 26 '16 at 13:32
  • sure you can post to the same script. you have to read the data ofcourse and do something with it. note the code sequence tho. My Recommendation however is to seperate the Code from the View completely and also handle the ajax reqiest in an explicit controller function – SteVoi Mar 26 '16 at 13:35
  • @SteVoi How does one post AJAX request to the same page that contains the ajax code block? I am aware it can be done, but not without some significant challenges that are well beyond the abilities of most novices. Specifying a secondary, independent, PHP page in the `url: "secondary_page.php",` parameter of the ajax code block is by far the easiest way for the OP to solve his problem, and is the way 90% of coders would solve it. Why would you remark that it can be done without pointing out the significant inherent difficulties with that approach? – cssyphus Mar 26 '16 at 14:07
  • @gibberish: just handle the ajax call on top of the script. again i do not recommend doing this but if you would like to its abolutely possible: if(ajax_data) { do somehting } Rest of the script. the proper way is to route the ajax call do a dedicated function, return the reply and handle the reply using JS in the actual script. Basically just like you recommended – SteVoi Mar 26 '16 at 23:06
  • @SteVoi Please have a look at [this post](http://stackoverflow.com/questions/17529509/values-not-updated-after-an-ajax-response/17530014#17530014), and even reproduce in a test environment at your location (too bad jsFiddle doesn't handle AJAX - grrrr). It *is* possible to post to the same page using AJAX, but coded backflips are necessary -- the linked post is the usual result. It's one of these things that is good to see for yourself. – cssyphus Mar 27 '16 at 19:18