PHP+JavaScript开发图书馆管理系统借阅页无法获取图书库存数量问题

问题原因 #

1. 前端getquantity函数获取图书编码时选择了不存在的DOM元素：代码中$("#bookid2").val()对应的id=bookid2输入框不存在，实际图书编码输入框的id是bookid，导致传给后端的bookid2参数为空，无法查询库存。
2. 图书编码输入框的失焦事件仅绑定了getquantity，没有同时触发获取图书名称的getbook函数，会导致图书名称不更新。
3. get_quantity.php输出了多余的文本内容（<b>Book Name :</b>、重复的库存数值），这些内容不属于select标签的合法子元素，会导致下拉框结构混乱无法正常显示。
4. 页面存在HTML语法错误：<div class="content-wra未闭合、<div class="col-md-10 col-sm-6 col-xs-12 col-md-offset-1""尾部多了多余引号，可能导致页面渲染异常。

修复步骤 #

1. 修正getquantity函数的参数获取逻辑 #

把issue-book.php里的getquantity函数中选择器改为正确的#bookid：

//function for quantity
function getquantity() {
  $("#loaderIcon").show();
  jQuery.ajax({
    url: "get_quantity.php",
    // 下方选择器从#bookid2修改为#bookid
    data:'bookid2='+$("#bookid").val(),
    type: "POST",
    success:function(data){
      $("#get_quantity").html(data);
      $("#loaderIcon").hide();
    },
    error:function (){}
  });
}

2. 修正图书编码输入框的失焦事件，同时触发两个查询 #

找到图书编码输入框代码，把onBlur属性改为同时触发两个查询函数：

<input class="form-control" type="text" name="bookid" id="bookid" onBlur="getbook();getquantity();" required="required" />

3. 清理get_quantity.php的多余输出 #

删除get_quantity.php中不属于option标签的冗余输出内容，修正后代码如下：

<?php 
require_once("includes/config.php");
if(!empty($_POST["bookid2"])) {
  $bookid2=$_POST["bookid2"];
  $sql ="SELECT Quantity, id FROM tblbooks WHERE ISBNNumber=:bookid2";
  $query= $dbh->prepare($sql);
  $query->bindParam(':bookid2', $bookid2, PDO::PARAM_STR);
  $query->execute();
  $results = $query->fetchAll(PDO::FETCH_OBJ);
  if($query->rowCount() > 0) {
    foreach ($results as $result) { ?>
      <option value="<?php echo htmlentities($result->id);?>"><?php echo htmlentities($result->Quantity);?></option>
    <?php  
    }
    echo "<script>$('#submit').prop('disabled',false);</script>";
  } else { ?>
    <option class="others"> Invalid ISBN Number</option>
    <?php
    echo "<script>$('#submit').prop('disabled',true);</script>";
  }
}
?>

4. 修正页面HTML语法错误 #

修改两处错误的HTML代码：

<!-- 删除错误的未闭合标签<div class="content-wra，保留下方正确标签即可 -->
<div class="content-wrapper">

<!-- 去掉尾部多余的引号 -->
<div class="col-md-10 col-sm-6 col-xs-12 col-md-offset-1">

效果验证 #

修改完成后输入正确的图书ISBN，即可同时自动加载对应图书名称和库存数量。

内容的提问来源于stack exchange，提问作者Syed Mohammad Ibrahim Khalil