PHP Ajax , Not able to pass a PHP value from one page to another using AJAX

Question

I have a php code that post value using ajax to another php page , but the value provided is not reflecting in UI nor in console .

$(document).ready(function() {
  $('#CustomerName').click(function() {
    customername = $(this).text();
    load_data(customername);
    //  console.log(customername); //  works 
  });



  function load_data(Customername) {
    // console.log(Customername); // works 
    $.ajax({
      url: "getvalueafterclick.php",
      method: "POST",
      data: {
        Customername: Customername,
        EnvironmentType: "BA"
      },
      success: function(data) {
        $('#result').html(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert("some error occured->" + jqXHR.responseJSON);
      }
    });
  }
});

<?php
// perform actions for each file found
foreach (glob("CustomerConfigFiles/*.json") as $filename) {
      echo ' <a href="#" id ="CustomerName" class="mm-active">
      <i class="metismenu-icon pe-7s-rocket"></i>'.substr(substr($filename,20), 0, -5).'</a>';
}
?>

So when i give console.log in function and onclick , it returns value but when i try to pass CustomerName , it just returns null .

getvalueafterclick.php

<?php
$pat =$_POST['EnvironmentType'];
$lat =$_POST['Customername'];
echo "<script>console.log('Customer Name: " . $lat . "');</script>"; 
echo "<script>console.log('ENVIRON: " . $pat . "');</script>"; 

?>

Here is output i get :

Answer 1

Change id to class for CustomerName , I have added/ changed your code, see if it helps to solve your problem.

        $(document).ready(function() {
      // changed # to . for class
          $('.CustomerName').click(function() {
            customername = $(this).text();
            load_data(customername);
            //  console.log(customername); //  works 
          });
    
    
    
          function load_data(Customername) {
            // console.log(Customername); // works 
            $.ajax({
              url: "getvalueafterclick.php",
              method: "POST",
              data: {
                Customername: Customername,
                EnvironmentType: "BA"
              },
              success: function(data) {
                $('#result').html(data);
               // console added to check what it is giving
                console.log(data);
              },
              error: function(jqXHR, textStatus, errorThrown) {
                alert("some error occured->" + jqXHR.responseJSON);
              }
            });
          }
        });

    <?php

     //your code
    // perform actions for each file found
// here in link change id to class for customer name 
    foreach (glob("CustomerConfigFiles/*.json") as $filename) {
          echo ' <a href="#" class="CustomerName" class="mm-active">
          <i class="metismenu-icon pe-7s-rocket"></i>'.substr(substr($filename,20), 0, -5).'</a>';
    }

// my testing code 

        $data =["a","b","c","d","e","f","g","h"];
     // perform actions for each file found
    // here in link change id to class for customer name 
        foreach ($data as $filename) {
              echo ' <a href="#" class="CustomerName" class="mm-active">
              <i class="metismenu-icon pe-7s-rocket"></i>'.$filename.'</a>';
        }
   
    


   ?>


    getvalueafterclick.php
      <?php
      $pat =$_POST['EnvironmentType'];
      $lat =$_POST['Customername'];
      echo "Customer Name:" . $lat . "-"; 
      echo "ENVIRON: " . $pat ; 

?>