PHP，AJAX和服务器-客户端的挫败感

Question

I have a table that's generated from php. The way I've done this is probably not the most efficient way to do it since I wrote it all myself and I'm not an expert.

Everything starts when the user pastes part numbers into a search box on a previous page, which is then sent here to return.php under the variable lines .

return.php

$c = $_POST['c'];
if (!$_SESSION['lines']) {
  $_SESSION['lines'] = $_POST['lines'];
}
$partNumber = array(); //define $partNumber as array

$x = -1;
$supplierQuery      = "SELECT distinct supplier, quotePartNumber FROM allparts WHERE quotePartNumber = '$q'" ;
$supplierResult     = mysqli_query($con, $supplierQuery);

foreach ($_SESSION['lines'] as $q) {
 $x = $x + 1; // each time we loop through this, x++

   while ($row = mysqli_fetch_array($supplierResult)) {
     $partNumber[]   = $row['quotePartNumber'];
     $customerQuery  = "SELECT DISTINCT quoteCustomer FROM $supplier where quotePartNumber = '$q'";

    if (!$c) { // $c becomes set once a user types in an end customer - without that, we want ALL generic info to be returned.
        $costQuery      = "SELECT * FROM $supplier where quotePartNumber = '$partNumber[$x]' ORDER BY quoteCost ASC LIMIT 1" ;
      } else {            
        $costQuery      = "SELECT * FROM $supplier where quotePartNumber = '$partNumber[$x]' and quoteCustomer = '$c' ORDER BY quoteCost ASC LIMIT 1" ;
       }
       $getCustomer      = mysqli_query($con, $customerQuery);
    }

later on in my table, I have this:

<td><?= $partNumber[$x] ?></td>
<td><?= $cost ?></td>
<td>
  <select class="btn btn-danger" onChange="selectCustomerCMR(this.value)">
  <option value="" disabled selected><?php if($c) { print $c; } else { print "Select Purchasing Customer";} ?></option>                  

  <?php                              
  while ($row = mysqli_fetch_array($getCustomer)) {                                 

  $customerName = $row['quoteCustomer'];          
  ?>
    <option><?= $customerName ?></option>                        

  <?php
  }
  ?>          
  </select>    
</td>

Any change to the dropdown will launch this script:

<script>
function selectCustomerCMR(str) {
var id = str;

$.ajax({
      type: 'POST',
      url: 'return.php',
      data: {'c':id,'lines':lines},        
        success:function(data){
        $("#info").html(data);
        }
  });        
}
</script>

What I'm trying to do

Let's say my generated table has 3 rows, with part numbers

There is a drop-down to allow the user to select a specific customer. When the user clicks on this, the script takes that value and uses AJAX to send it back to the same page (return.php), which then grabs it using the $c = $_POST['c']; code.

My Issue

When return.php loads a "second time" with a value for $c , I don't know how to make it so that the line that the user selected gets changed . Right now, anytime I select a customer from a line's drop-down, return.php reloads, and it assigns that customer to the FIRST row, ignoring all the other rows.

I specifically created $partNumber as an array and used $x so I could increase the value of x each time the foreach loop iterated. This worked, so of the three lines in the above table, the first one is $partNumber[0] and the second one is $partNumber[1] , etc... But I don't know how to get that information into the javascript function and send it back to the page when it reloads, so that I can then change my SQL query to ONLY action when the condition is right for that line...

Thanks for reading, and thanks for any help!

Answer 1

Consider changing your <select> code to this:

<select class="btn btn-danger" data-x="<?= $x ?>" onChange="selectCustomerCMR(this)">

Then, your Ajax code can be changed to this:

function selectCustomerCMR(select) {
    var id = select.value, x = select.getAttribute("data-x");

    $.ajax({
        type: 'POST',
        url: 'return.php',
        data: { c: id, lines: lines, x: x },        
        success: function(data){
            // Update!
        }
    });        
}

That way, your PHP can get both c and x .