当输入字段通过XMLHttpRequest在PHP文件中时,Javascript onkeyup函数不起作用

I'm doing a invoice web application for my client using PHP, Javascript. What I am trying to do is I need to fetch data from database to fields with some javascript operations like quantity multiplication, total amount calculations.

What I did was. I used XMLHttpRequest function to fetch data from a php file. I can fetch data but the field operations are not working when it called from php file

//xmlhttprequest with data in index.php

<script>
function showProduct(str) {
    if (str == "") {
        document.getElementById("txtNew").innerHTML = "";
        return;
    } else {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtNew").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","invoiceprdctdata_loader.php?q="+str,true);
    xmlhttp.send();
}
}
</script>

//input fields in index.php

<div class="customer-div" id="item-box">
    <p class="row"><center><b class="col-md-8 col-12">Product Inventory</b></center><a style="float:right; margin-top:-30px; border-radius:0px; border-color:grey; background-color:grey; color:white;" class="col-md-4 col-12 btn btn-primary"><span id="additem">Add Item</span></a></p>
    <div class="form-group row" id="item-div">
        <p class="col-md-12 col-sm-12">Item 1</p>
        <a class="col-md-12 col-sm-12" id="remove" style="float:right !important; margin-top: -40px;text-align: right;"><i class="fa fa-minus"></i></a>             
        <select class="form-control" name="Item_Name[]" id="itemname" placeholder="Item Name" onchange="showProduct(this.value)" class="form-control input-md col-md-6 col-12"  required="">
            <option value="new">Item Name</option>
            <?php 
            while($prdtrow=mysqli_fetch_array($prdtsql)){//Company names in Drop down
                $Product_ID=$prdtrow['product_id'];
                $Product_Name=$prdtrow['product_name'];
                echo '<option value="'.$Product_ID.'">'.$Product_Name.'</option>'; }//close your tags!!
?>
        </select>
        <div id="txtNew"><b style="text-align:center; margin:0 auto; display:table;">Please Select an item Purchased</b></div>
    </div>
</div>

//Javascript Operations

     <script type="text/javascript">

            $('.itemquantity,.itemrate').keyup(function(){
      var iquantity =$(this).parent().find('.itemquantity').val();
      var irate = $(this).parent().find('.itemrate').val();

      $(this).parent().find('.itemtotal').val(iquantity * irate); 
    }); 

function total_amt() {
    $(document).ready(function() {
    var sum = 0;
    $(".itemtotal").each(function(){
        sum += +$(this).val();
    });
    $(".total_amount").val(sum);
});
     // document.forms["Registration"]["Total_Amount"].value=total;
}

$(document).ready(function(e) {
var x= 2;
var phpCode = "<?php $productquery='SELECT * FROM `products` WHERE 1'; $prdtsql=mysqli_query($conn, $productquery); while($prdtrow=mysqli_fetch_array($prdtsql)){ $Product_ID=$prdtrow['product_id']; $Product_Name=$prdtrow['product_name']; ?> <option value='<?php echo $Product_Name; ?>'><?php echo $Product_Name; ?></option> <?php } ?>";
        //Variable

        //Add rows to the form
        $('#additem').click(function(e) {
          var html = '<div class="form-group row item-div" id="item-div"><p class="col-md-12 col-sm-12">Item '+ x +'</p><a class="col-md-12 col-sm-12" id="remove" style="float:right !important; margin-top: -40px;text-align: right;"><i class="fa fa-minus"></i></a><select class="form-control" name="Item_Name[]" id="itemname" placeholder="Item Name" class="form-control input-md col-md-6 col-12"  required=""><option value="new">Item Name</option>'+ phpCode +'</select><input type="text" name="Item_Weight[]" id="itemweight" placeholder="Item Weight" class="form-control input-md col-md-6 col-12"  required=""><input type="text" name="Item_Rate[]" id="itemrate" onkeyup="total_amt()" placeholder="Item Rate" class="form-control input-md col-md-6 col-12 itemrate"  required=""><input type="text" name="Item_Quantity[]" id="itemquantity" onkeyup="total_amt()" placeholder="Item Quantity" class="form-control input-md col-md-6 col-12 itemquantity"  required=""><input type="text" name="Item_Total[]" id="itemtotal" onkeyup="total_amt()" placeholder="Item Total" style="visibility:visible;" class="form-control input-md col-md-6 col-12 itemtotal"  required=""></div>' ;
           $("#item-box").append(html);
          x++;
            $('.itemquantity,.itemrate').keyup(function(){
      var iquantity =$(this).parent().find('.itemquantity').val();
      var irate = $(this).parent().find('.itemrate').val();

      $(this).parent().find('.itemtotal').val(iquantity * irate); 
    }); 
    });

        //Remove rows to the form
    $("#item-box").on('click','#remove',function(e) {
    $(this).parent().remove();
    x--;
    });
    });

//invoiceprdctdata_loader.php

<?php
include("config.php");
include('session.php');
include('function.php');
include("APIs/mpdf/mpdf.php");
header('Content-type: text/html; charset=UTF-8') ;//chrome
ini_set('max_execution_time', 600); //600 seconds = 10 minutes
ini_set('display_errors', 1);
error_reporting(1);
if(isset($_SESSION['login_user'])){
$q = $_GET['q'];

if ($q != "new")
{
    $productquery="SELECT * FROM `products` WHERE `product_id` = '$q'";
  $productsql=mysqli_query($conn, $productquery);
  $productrow=mysqli_fetch_array($productsql);
  $Product_ID = $q;
  $Product_Name=htmlspecialchars($productrow['product_name']);
  $Product_Weight=$productrow['product_weight_grams'];
  $Product_Rate=$productrow['product_price'];

  echo '
<input type="text" name="Item_Weight[]" id="itemweight" placeholder="Item Weight" value="'.$Product_Weight.'" class="form-control input-md col-md-6 col-12"  required=""> 
              <input type="text" name="Item_Rate[]" id="itemrate" onkeyup="total_amt()" value="'.$Product_Rate.'" placeholder="Item Rate" class="form-control input-md col-md-6 col-12 itemrate"  required="">
              <input type="text" name="Item_Quantity[]" id="itemquantity" onkeyup="total_amt()" placeholder="Item Quantity" class="form-control input-md col-md-6 col-12 itemquantity"  required="">
              <input type="text" name="Item_Total[]" id="itemtotal" onkeyup="total_amt()" placeholder="Item Total" style="visibility:visible;" class="form-control input-md col-md-6 col-12 itemtotal"  required="">
          ';
        }
}
?>

I expect all operations should work. 1. I can fetch the data from field 2. Add Item should work 3. Quantity Price multiplication should work 4. Going to add a operation in weight field too for automatic weight based price deduction

douao2019
douao2019 不,我找不到任何错误
大约一年之前 回复
doubu1970
doubu1970 欢迎来到StackOverflow!第一个问题:您是否在浏览器的DevTools中看到任何错误?
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐