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
