根据组合框查询新数据,并将其显示在新文本框中

时间:2018-06-27 15:19:10

标签: php html ajax

我有一个包含项目编号ID的组合框。基于此组合框的选择,我想在另一个包含相同项目编号id的表中显示行数。此值将附加到蓝色框“ PO数”。

Image of Form

我的文件“ 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还是很陌生,所以如果我所做的任何事情都没有道理,对不起。

到目前为止,当我更改下拉列表时,“ po的数量”的整个文本框都消失了。我已经在mysql工作台上的“ getnumberpo.php”上运行了查询,并且运行正常。

例如:当我从下拉菜单中选择一个项目时。它将查询另一个名为tblCustomerPOs的表,并检查多少行包含所选的项目号。

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

如果将来有人遇到这个问题并想要答案...

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>