Trying to get a variable passed thru jQuery to PHP

Hi All,

I have a form that has a drop down “select” for cust_name. When that drop down is clicked the value of the customer id goes into a PHP variable called $cust_id.

I am trying to use jQuery “.change” to load a new section of code when the customer name is changed. The load works great. But what I also need to do is capture the value of the $cust_id from the “value=” attribute so that in the loaded page I can execute a MySQL routine to retrieve the rest of the customer data. Here is a snippet of the relevant code:
jQuery routine which does not work:

$(‘#custid’).change(function(event) {
// Get the custid from the value
var custid = $(this).attr(“value”);
// Send Ajax request to apply-payments.php, with custid set as “cust_id” in the POST data
$.post(“display-property.php”, {“cust_id”: custid});
//Now load the div for the property display
//This part works fine
$(‘#display-property-address’).load(‘display-property.php’);
event.preventDefault();
});

here is the form select routine:

<form method=“post” action=“#”>
<fieldset>
<legend>Customer ID</legend>
<ol>
<li>
<select title=“Cust ID” name=“cust_id” id=“custid”>

//A MySQL Routine was executed previously to get the values for cust_id below

$cust_id = $row[‘cust_id’];
?>
<option value=“<?php echo $cust_id ?>”> <?php echo $cust_id_dis ?> </option>
</select>
</fieldset>
</form>

if you need anything else to assit me with this please let me know.

Thanks in advance for your help

Rick

I don’t know if you ammended the code so as not to post a url publicly, but it seems that this comment and it’s code are out of step:


// Send Ajax request to apply-payments.php, with custid set as "cust_id" in the POST data
$.post("display-property.php", {"cust_id": custid});

should be?


// Send Ajax request to apply-payments.php, with custid set as "cust_id" in the POST data
$.post("apply-payments.php", {"cust_id": custid});

And in your PHP you would capture the value:


$_POST['cust_id'];

Make sure you escape the value before passing it into your SQL :smiley:

Thanks Anthony for your reply.

I made the change you suggested but I am still not getting the value passed to my code. Any further suggestions?

Anthony and all,

It seems there is some kind of problem with the $.post command:

$.post(“apply-payments.php”, {“cust_id”: custid});

I tried replacing the “custid” label with a hard coded value (like ‘1’) and it still will not come to my source page.

Any help would be appreciated. Thanks!

There would be 2 things to check here. The first would be; Is the $.post actually submitting the data to the page. I use either Firebug (addon for Firefox), or Chrome Dev Tools (Ctrl+Shift+I) to inspect the POST request being made and check that you aren’t getting any 404s and that your post variables are being sent.

Once you know the post is working, then you need to check the php page to make sure it’s receiving the data. A very easy way to do this is to setup a simple test php page:


<?php
print_r($_REQUEST);
?>

and simple jQuery:


$.post("test.php", {"cust_id": "a value to send"},function(data){
console.log(data);
});

When you call the jQuery it should output the result of the page into the javascript console.

Great suggestions Anthony. Let me do these things and I’ll re-post my results.

Thanks again for your reply.

Anthony and all,

This is extremely weird. When I run the Firebug routines it shows that the post is in fact getting the correct value and when I run the test program it shows the same. Could there be something in the way I am displaying the value in my source that is causing the value to not display?

What I am doing until I get this resolved is invoking a PHP echo instruction like this:

echo "custid: " . $_POST[‘cust_id’];
exit();

This code executes as the first couple of lines in the loaded HTML. What gets displayed to my webpage is:

custid:

As you can see the label is there but the value is blank.

Any Ideas?

Anthony & All,

Here is a link to the page that I am working on. It has Firebug lite installed on it so we can examine what is happening.

JD’s Makit Green

if anyone wants to look at this page and see if they see something that will help me with this problem - Please do.

Thanks.

Having the example page helps alot to figure out your issue. You are submitting a post to apply-payments.php, then getting another page display-property.php. The $_POST variable is only current for apply-payments.php when something has been posted to the page.

PHP is stateless, if you want to transfer the value of something from one page load to the next you need to store it somewhere (Session, Database, File etc).

Ideally what I think you would want to achieve here is send your values to the page AND read the contents back in one $.post() and not split the saving/reading of the values into 2 different http requests.

Thanks for the response again Anthony.

I do get the concept of the $_POST needing to be in the same page, but if I understand your comment correctly, even though I am loading the new HTML inside a DIV of the same HTML page, as far as the $_POST variable is concerned it is not in the same page - is that correct?

I am not sure how I would code the single $_POST command to do both the save and read. If you have a suggestion here I would be interested in seeing what you mean.

As an alternative for now, I will play around with not loading the HTML dynamically but hard coding it to the same page. If what you are saying is the issue, then that should resolve the $_POST variable not being part of the same page.

It will have to wait until tomorrow though, as it is late here in the States.

I appreciate your help with this. I’ll advise to my results tomorrow.

Hi Again,

Wow, this trying to learn Ajax is really beating me down.

I have now done this:

  1. set the jQuery script to send the custid variable to a temporary php file called test.php. The test.php file looks like this:

<?PHP
include(‘mig-sch-admin.htm’);
// the above just sets up the sessions etc
?>
<?php
$cust_id = $_POST[‘cust_id’];
$_SESSION[‘cust_id’] = $cust_id;
echo $_SESSION[‘cust_id’];
?>
</body>
</html>

  1. as you can see when this routine loads it captures the $_POST from the script and sets a $_SESSION variable.

  2. I then echo the $_SESSION variable and end the test routine.

  3. Here is the jQuery script I am using:

$.post(“test.php”, {cust_id : custid}, function(data){
if (data.length>0){
$(“#display-property-address”).html(data);
}

When I run the apply-payments.php routine with these changes the value of the $_SESSION variable from the test.php routine gets displayed correctly in the display-property-address div. But when I try to load the display-property.php HTML, the $_SESSION variable is not available to me.

So how do I capture the value sent to the script (Apparently html.data) so I can work on it with my database routines?

But when I try to load the display-property.php HTML, the $_SESSION variable is not available to me.

This is probably because you have to load the display-property.php after the post has completed. To ensure this you need to take the call you make and put it inside the callback from the $.post().


$.post("apply-payments.php", {"cust_id": custid},function(data){
    $('#display-property-address').load('display-property.php');
});

The “callback” is the function that $.post is calling once the ajax is complete. Because these requests generally take time you need to wait until the server communication has happened before you run the rest of the code. The old way you had it would simply trigger both calls to happen at almost the same time. This is valid javascript, it lets you run 2 or more ajax calls at once (where the ‘a’ in ajax comes from, asynchronous), but in your case you don’t really want this to happen.

Using session variables is probably a pretty messy way to do it, but if it works and you learn from it then it can’t be all bad.

I must be really missing something here. What you are saying makes perfect sense but nothing I do seems to work. This script will put the custid into the box as expected:

$.post("test.php", {cust_id : custid}, function(data){
   if (data.length>0){
     $("#display-property-address").html(data);
   }

But I do not know how to access the custid after it has been placed in the box by the html(data) Callback.

This code which should now have access to the $_SESSION variable apparently still does not have the $_SESSION variable and therefore the custid does not display:

$.post("test.php", {"cust_id": custid},function(data){
    $('#display-property-address').load('display-property.php');
});

I sure do apologize for my ignorance with this and sincerly appreciate your patients with me, but I have to find a way to get this to work in order to move on with my client’s project.

Well,

I’m not sure I understand why but this script works:

$.post("display-property.php", {"cust_id" : custid}, function(data){
     $("#display-property-address").html(data);
});

It does not load the display-property.php to the apply-payments.php but it still gets the variable cust_id and allows me to execute a MySQL call and load the form properly.

So at least I can now move on to the next “Challenge”. Thanks for your help thus far Anthony.