CODEWITHSUNDEEP
javascriptphpajax
Brian Hartman
Brian Hartman

Reputation: 35

Passing variables to a page with AJAX and returning those variables in PHP

I'm trying to do something I would think would be really simple: Pass form data to a PHP page with AJAX, and get the result of the PHP back.

Edited to Add: As written right now, it only returns successfully sporadically, rather than every time it's run, for some reason.

Edited to Add (05/30/2020):

I was able to get it working such as it is by changing the ajax like this:

<script>
                    $(document).ready(function(){

                        $("#button").click(function(){

                            var DDD_Number=$("#DDD_Number").val();
                            var Manager_Review=$("#Manager_Review").val();
                            var dataTosend='?DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
                            $.ajax({
                                type: "GET",
                                url:'showme.php' + dataTosend,
                                data:dataTosend,
                                async: false,
                              success:function(data){
                                    document.getElementById('txtresponse').innerHTML = "Success.";
                                    document.getElementById('thisworks').innerHTML = data;
                                },
                                error: function(data){
                                   document.getElementById('txtresponse').innerHTML = "failure.";
                               }
                            }); 
                        });
                    });
            </script>

Now I have to work on serializing the form, because it's actually multiple rows I have to pass. I don't know if I need that as a second question, though.

This is my main page:

<html>
        <head>
            <script src="Scripts/jquery.min.js"></script>
            <script src="Scripts/jquery-2.1.3.min.js"></script>
            <script type="text/javascript" src="Scripts/jquery.plugin.min.js"></script>
            <script type="text/javascript" src="Scripts/jquery.datepick.min.js"></script>
            <script>
                    $(document).ready(function(){

                        $("#button").click(function(){
                            var DDD_Number=$("#DDD_Number").val();
                            var Manager_Review=$("Manager_Review").val();
                            var dataTosend='DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
                            $.ajax({
                                type: "POST",
                                url:'showme.php',
                                data:dataTosend,
                                async: true,
                               success:function(data){
                                   document.getElementById('txtresponse').innerHTML = "Success.";
                                   document.getElementById('thisworks').innerHTML = "Successful.";

                               },
                                error: function(data){
                                    console.log(data);
                                   document.getElementById('txtresponse').innerHTML = "failure.";
                                   console.log(data);
                               }
                            });
                        });
                    });
            </script>
        </head>
    <body>
        <form id="dddform" method="post">
            <input type="text" id="DDD_Number" name="DDD_Number"><br>
            <input type="text" id="Manager_Review" name="Manager_Review"><br>
            <button id="button" name="Submit">Click Me</button>
        </form>
        <div id="txtresponse"></div>
        <div id="thisworks"><?php if(!isset($_POST['Submit'])){echo $Manager_Review;} ?></div> 

            </div>
    </body>
</html>

This is showme.php:

<?php

$Manager_Review_Date = $_POST['Manager_Review'];

echo $Manager_Review_Date;

?>
<script language = 'Javascript'>
    document.getElementById('thisworks').innerHTML = '<?php echo $Manager_Review_Date; ?>';
</script>

The call is made successfully. (The "Success"and "Successful" messages appear), but I can't get the value of $Manager_Review_Date to appear in the "thisworks" DIV.

Any pointers? I'm fairly new to AJAX (if you couldn't tell from my code).

Upvotes: 0

Views: 30

Answers (1)

u_mulder
u_mulder

Reputation: 54831

Your php should be:

<?php
$Manager_Review_Date = $_POST['Manager_Review'];
echo $Manager_Review_Date;
// NO javascript here

And the output of this script is in data variable of success callback:

success:function(data){
    document.getElementById('txtresponse').innerHTML = "Success.";
    document.getElementById('thisworks').innerHTML = data;
},

Upvotes: 1

Related Questions