Pass JQuery Variable To Php Via AJAX

Question

Am passing a variable to JQuery via the data-pid in a href link in payments.php and using AJAX to pass this variable to pmntPopup.php, however the variable is not being passed on

payments.php

<td class="listingTextLeft">
<a href="" data-pid="<?php echo $row[0] ?>" class="pmntDetail"><?php echo $row[20] ?></a>
</td>
<script>
        $( ".pmntDetail" ).click(function( paymentID ) {
            paymentID.preventDefault();
            paymentID.stopPropagation();
            var pmntid = $(this).data("pid");
            console.log("ID: ", pmntid);
            $.ajax({
                type: "POST",
                url: "pmntPopup.php",
                data: {pmntid : pmntid },
                success:function(data) {
                    console.log(pmntid);
                    $("#pmntDetailPopup").modal({position: ["5%"]});
                }
            });
        });
</script>

The console log in both instances show the correct value for pmntid but when when trying to use POST to retrieve it in pmntPopup.php below I just get the 'Payment Is Not Carried' message.

pmntPopup.php

<?php
    if(isset($_POST['pmntid'])) {
        $pmntid = $_POST['pmntid'];
    } else {
        echo "Payment Is Not Carried";
    }
?>

I've searched this site and from what I can tell this should work, I've probably missed something really basic or doing something really stupid ... or both.

Console POST output:

Console POST Output

Hi @Jay, have already posted a picture of the POST output from the console above, the picture below shows the Popup window output if that's any help:

Popup Post Output

As requested the console response output is shown below:

Have you watched the request / response in your browser's console window? Any errors? — Jay Blanchard, Feb 25 '15 at 20:54
No, no errors in the console and it gives the correct pmntid. Have added a picture showing this. @Sulthan, yes have echo'd the `$_POST['pmntid']` and it comes up blank. — Wignu, Feb 25 '15 at 21:11
Something is echoing back the '21', what else is in pmntPopup.php? — Jay Blanchard, Feb 25 '15 at 21:19
It's the `console.log(pmntid)` after the `success:function(data) {`. — Wignu, Feb 25 '15 at 21:22
Also, change `paymentID` to event and only use `event.preventDefault();`. You do not need `.stopPropagation();` — Jay Blanchard, Feb 25 '15 at 21:43
Your update doesn't provide any more insight. What is in the response tab of the Post? — Jay Blanchard, Feb 25 '15 at 21:50
I think OP is expecting the output of pmntPopup.php file in ajax's succuss function's `pmntid` variable. — Nagendra Rao, Feb 25 '15 at 21:54
@Jay have added the response output in the console. Rao, what I'm wanting is to use the pmntid in a sql query to populate pmntPopup.php. — Wignu, Feb 25 '15 at 22:12
If you put `var_dump($_POST);` at the top of your PHP what do you get when your submit the form? See the `ID: 1` at the top of the response? What generates that? — Jay Blanchard, Feb 26 '15 at 12:37
I did wonder where that was coming from as well, the var_dump gave `array(0) { }` so I definitely have no idea why it displays there. I've tried changing `pid` to a totally random variable name in case I was using it elsewhere in the code, but has made no difference. — Wignu, Feb 26 '15 at 18:09
Yet in the cosnsole response var_dump gives: `array(1) { ["nutterid"]=> string(1) "5" }` (nutterid is the total different variable name I tried btw) — Wignu, Feb 26 '15 at 18:11
Just to add if I load `pmnPopup.php` as a normal page `$_GET['pid']` works and passes the value which is used in the subsequent query so the problem is definitely just when using the simplemodal popup. — Wignu, Feb 26 '15 at 20:31

score 0 · Answer 1 · edited Feb 25 '15 at 21:14

0

I'm not sure what you're doing with the paymentID variable, but this should work for you:

$( ".pmntDetail" ).click(function( ) {
    var pmntid = $(this).data("pid");
    console.log("ID: ", pmntid);
    $.ajax({ ...

edited Feb 25 '15 at 21:14

Jay Blanchard

34,243
16
77
119

answered Feb 25 '15 at 21:02

wholegrainwheat

1
1

Those line breaks and all that were in there were because the code was not formatted properly @Wignu – Jay Blanchard Feb 25 '15 at 21:29
Ah thought it might be formatting. Tried the code again without it, gives the following error: `PST http://localhost/pmntPopup.php x` as if it now cannot find the pmntPopup.php file. – Wignu Feb 25 '15 at 21:55

Nagendra Rao · Answer 2 · 2015-02-25T22:03:02.733

Try this, the response of the ajax call will be set to data variable of your success callback function.

payments.php

<td class="listingTextLeft">
<a href="#" data-pid="<?php echo $row[0] ?>" class="pmntDetail"><?php echo $row[20] ?></a>
</td>
<script>
        $( ".pmntDetail" ).click(function( event ) {
            event.preventDefault();
            var pmntid = $(this).data("pid");
            console.log("ID: ", pmntid);
            $.ajax({
                type: "POST",
                url: "/UCM/pmntPopup.php",
                data: {pmntid : pmntid },
                success:function(data) {
                    console.log(data); // YOU WILL RECEIVE THE RESPONSE IN data variable.
                    $("#pmntDetailPopup").modal({position: ["5%"]});
                }
            });
        });
</script>

pmntPopup.php

<?php
    if(isset($_POST['pmntid'])) {
        echo $_POST['pmntid'];
    } else {
        echo "Payment Is Not Carried";
    }
?>

[Also, I have put the complete url of the file, ie., "/UCM/pmntPopup.php" to your ajax url param]

Thanks Rao, but still have the same problem, no pmntid passed through. — Wignu, Feb 25 '15 at 22:16

score 0 · Answer 3 · 2015-02-27T11:30:37.467

0

Try this instead.

<td class="listingTextLeft">
<a href="" data-pid="<?php echo $row[0] ?>" class="pmntDetail"><?php echo $row[20] ?></a>
</td>
<script type="text/javascript">
$( ".pmntDetail" ).click(function(e) {
e.preventDefault();
var pmntid = $(this).data("pid");
console.log("ID: ", pmntid);
var request = $.ajax({
url: "pmntPopup.php",
type: "POST",
data: {pmntid : pmntid},
dataType: "html"
});
request.done(function(msg) {
console.log( msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Connection error: " + textStatus );
});
});
</script>

pmntPopup.php

<?php
    if(isset($_POST['pmntid'])) {
        $pmntid = $_POST['pmntid'];
         echo $pmntid;
    } else {
        echo "Payment Is Not Carried";
    }
?>

As an alternative solution try jQuery post

$.post( "pmntPopup.php", {pmntid : pmntid})
.done(function( data ) {
alert( "Data Loaded: " + data );
});

edited Feb 27 '15 at 11:30

answered Feb 25 '15 at 22:08

Made no difference sorry, variable still not passed through. – Wignu Feb 25 '15 at 22:15
@PeterDarmis "Use single quotes on data-index", why? – Nagendra Rao Feb 25 '15 at 22:20
@Rao based on a working example http://stackoverflow.com/questions/8046482/how-can-i-fix-this-undefined-index-error-jquery-ajax-to-php – Feb 25 '15 at 22:21
Yes I tried both, even tried it with single quotes around pid. Still no go unfortunately. – Wignu Feb 25 '15 at 22:22
Then as @Rao posts in his answer you should check the path that you post data. I don't know where pmntPopup.php is located in your server if it is in the same folder with payments.php. – Feb 25 '15 at 22:24
@PeterDarmis In the reference you gave, he was passing a string to data, but here its already an object, and it doesn't matter if the key has single quotes or not, as in, {a: a} is same as {'a': a} You can use quotes if the key has hyphen in it, eg: {'abc-d': x} – Nagendra Rao Feb 25 '15 at 22:30
What version of jQuery you use? Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead. – Feb 25 '15 at 22:47
@PeterDarmis He is not using the jqXHR.success, he is using ajax settings object, where success is still very much alive. – lshas Feb 25 '15 at 22:57
@Ishas then a simple jquery post is an alternative to the above example, from documentation: http://api.jquery.com/jquery.post/ This is a shorthand Ajax function, which is equivalent to: $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType }); I am only trying to say my friend that since there is no actual error on the code of the question maybe an alternative solution could be of use. – Feb 27 '15 at 11:26

Pass JQuery Variable To Php Via AJAX

3 Answers3