Passing data from ajax function to php file/function is showing data as NULL

Question

I have a page with two selects, the first to choose the car manufacturer and the second to choose the car series. The select options should change accordingly to what the manufacturer has been chosen. Say if "BMW" is chosen then a list such as "3 Series", "Z Series", etc should show. Then they should change if I changed the manufacturer to "Audi". I have tried many attempts to pass through the data with AJAX to speak to my PHP function but upon the "success:function(data)", the data is null as seen on the console log. Below is my ajax code.

$(document).ready(function(){
    $('#chooseManu').on('change',function(){
        var manu = $(this).val();
        if(manu){
            $.ajax({
                url:'ServerScripts/showStock.php?manu='+manu,
                data:{'manu':manu},
                dataType: 'json',
                success:function(data){
                    // $('#chooseSeries').html(html);
                    console.log(data);
                }
            }); 
        }
    });
});

PHP Function that is to change the series options according to manufacturer chosen

function seriesChoice() {
  require 'connection.php';

  if (isset($_POST["manu"]) && !empty($_POST["manu"])) {
    $chosenManu = json_decode($_POST["manu"]);
    $findSeries = "SELECT DISTINCT carSeries FROM carParts WHERE carManu = ".$chosenManu;
    $series = $conn->query($findSeries);
    if ($series->num_rows > 0) {
      echo '<option value="">Series</option>';
      while($displaySeries = $series->fetch_assoc()) {
        echo '<option>',$displaySeries['carManu'],'</option>';
      }
    } else {
      echo '<option value="">Series Not Available</option>';
    }
  } else {
    echo '<option value="">Select Manufacturer</option>';
  }
}  
?>

And then my html where it all shows:

<select id="chooseManu">
              <option value="0" selected="selected">Manufacturer</option>
              <?php
                manuChoice();
              ?>
            </select>
            <select id="chooseSeries">
                <?php
                  seriesChoice();
                ?>
           </select>

In the webdev tools (F12), on the 'Network' tab, I am able to see that it does pass 'ServerScripts/showStock.php?manu=(manu chosen)', but on the console log the data shows as null. Unless I "console.log(manu)", then obviously it logs the manufacturer chosen also. I have tested with many statements to see if the $_POST in the php function is not empty and isset, neither are true. So it looks like the function isn't even seeing the variable being passed through at all.

Understanding this is one of my first actual projects, I can see that there will be a lot of things here that aren't nice to see in the coding world, so please be gentle with me! However, my major concern here at the moment is getting this variable to be seen.

If there is anything here I have not explained well or you just need clarification with please do let me know!

Any help is greatly appreciated!

score 0 · Answer 1 · answered Aug 16 '18 at 23:35

The default method for $.ajax() is GET. You're looking in the $_POST array. Either use POST:

$.ajax({
    url:'ServerScripts/showStock.php?manu='+manu,
    method:'POST',
    ...
});

Or look in the $_GET array:

if (isset($_GET["manu"]) && !empty($_GET["manu"])) {

Additionally, you're telling $.ajax() to expect JSON in return, but you're sending it HTML in return. Use the correct data type for what's being returned:

dataType: 'html',

Also, small note, you're trying to send the value twice. Not sure if this will cause problems, but you really only need to send it once. Just put it in the data property instead of on the URL:

$.ajax({
    url: 'ServerScripts/showStock.php',
    method: 'POST',
    data: {'manu':manu},
    dataType: 'html',
    success: function(data){
        // $('#chooseSeries').html(html);
        console.log(data);
    }
});

I also don't think you need json_decode() on the server in this case, though I could be wrong. But you do need to learn about SQL injection. Currently your code is wide open to it.

Thanks for the reply! So in regards to the data sending twice, thank you so much for that it was driving me crazy that it did that! I tried both ways, so adding the post method to the ajax function. Then I also tried changing the $_POST to $_GET in my php, as well as the dataType change. Instead of the console log now showing "null" it now actually outputs " " (nothing). When I change the manufacturer select numerous times it does count up on the side of the log so "(3) " . The option doesn't change either on my series choice, which still indicates that the data is empty or not set. — JPChesham, Aug 16 '18 at 23:44

Passing data from ajax function to php file/function is showing data as NULL

1 Answers1