Запрашивать новые данные на основе комбинированного списка и отображать их в новом текстовом поле.

Question

У меня есть выпадающий список, который содержит идентификатор номера проекта. Основываясь на выборе этого комбинированного списка, я хочу отобразить количество строк в другой таблице, содержащей тот же идентификатор номера проекта. Это значение будет добавлено к синему полю «Количество PO».

Мой файл "new-customer-po.php". Для простоты я покажу его по частям.

<?php
//Query for projectnumber

$query_1 = "SELECT PROJECTNOID, ProjectNumber, ProjectTitle, (SELECT (SELECT 
     CustomerName FROM tblCustomers WHERE Customer = CUSTOMERID) AS Customer 
     FROM tblCustomerContacts WHERE CustomerProjectLeadID = 
     CUSTOMERCONTACTID) AS CustomerProjectLeadID  FROM tblProjects ORDER BY 
     ProjectNumber DESC";

$result_1 = mysqli_query($conn, $query_1);
$options_1 = "";

while($row_1 = mysqli_fetch_array($result_1))
{
   $options_1.='<option value="'.$row_1[0].'">'.$row_1[1]." - ".$row_1[2]." - ".$row_1[3].'</option>';
}

?>

дальше вниз по этой странице у меня есть следующий HTML

<label>Project Number <b style="color:red;">*</b></label>
<select id="proj" name="projectnum" class="inputvalues" required>
<option disabled selected value>-- Project # - Title - Customer --</option>
   <?php echo $options_1; ?>
</select><br>

<div id="currentnumpo">
<label>Number of POs</label><input name="numpos" class="inputvalues" id="reqtxtfield" readonly/><br>
</div>

и после закрывающего тега html

<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#proj").on('change', function() {
    var num = $(this).val();
    if(num){
        $.ajax ({
            type: 'POST',
            url: 'getnumberpo.php',
            data: { num },
            success : function(htmlresponse) {
                $('#currentnumpo').html(htmlresponse);
                console.log(htmlresponse);
            }
        });
    }
});
});
</script>

Мой "getnumberpo.php"

<?php
echo $_POST['projectnum'];
if(isset($_POST['projectnum'])){
$sql = "SELECT COUNT(*) FROM tblCustomerPOs WHERE ProjectNum = '".$_POST['projectnum']."'";
$result = $conn->query($sql);

if ($sql) {
    while($row = $conn->query($sql)) {
        echo '<label>Number of POs</label><input name="numpos" class="inputvalues" id="reqtxtfield" placeholder="';
        echo $row[0];
        echo '" readonly/><br>';
    }
}
$sql = NULL;
}

?>

Я очень новичок в javascript / ajax, поэтому прошу прощения, если ничего из того, что я делаю, не имеет смысла.

До сих пор, когда я меняю раскрывающийся список, исчезает целое текстовое поле для «количества по». Я выполнил запрос на "getnumberpo.php" на MySQL Workbench, и он работает просто отлично.

Пример: когда я выбираю проект из выпадающего списка. Он запросит другую таблицу с именем tblCustomerPOs и проверит, сколько строк содержат выбранный номер проекта.

Спасибо за помощь

Answer 1

Если кто-нибудь сталкивался с этим в будущем и хотел получить ответ ...

getnumberpo.php (серверный скрипт)

<?php
 require "../inc/dbinfo.inc";

 $projectnum =$_POST['projectnum'];
 $sql = mysqli_query($conn, "SELECT COUNT(*) AS mycount FROM tblCustomerPOs WHERE ProjectNum = '$projectnum'"); //RESPONSE IS QUERY WITH REAL $PROJECTNUM
 $res = mysqli_fetch_object($sql)
 $count = $res->mycount;
 echo json_encode($count);
 exit();
?>

new-customer-po.php (Javascript)

//AUTO UPDATE NUMBER OF POS
$(document).ready(function(){
   $('#projectnum').change(function(){
     var projectnum = $(this).val();
     var data_String;
     data_String = 'projectnum='+projectnum;
     $.post('getnumberpo.php',data_String,function(data){
     var data = jQuery.parseJSON(data);
     $('#currentnumpo').val(data)
     });
  });
});

new-customer-po.php (html)

<label>Project Number <b style="color:red;">*</b></label>
<select id="projectnum" name="projectnum" class="inputvalues" required>
   <option disabled selected value>-- Project # - Title</option>
   <?php echo $options_1; ?>
</select><br>

<label>Number of Customer POs</label><input type="text" name="currentnumpo"  id="currentnumpo" class="inputvalues" readonly/><br>