javascript - 我想计算许多输入 javascript 并提交给 mysqli
问题描述
我的代码实际上适用于原始 html 代码附带的第一个输入,但是当我添加一行时,它不计算它们。我还想在 javascript 中显示一个 php var。最后,我想使用 mysqli 将添加的行发布到表中
<div class="card-body">
<h3 align="center">
<?php echo $products; ?>
</h3>
<table align="center">
<thead>
<tr>
<th style="text-align:center;">
<?php echo $code; ?>
</th>
<th style="text-align:center;">
<?php echo $product; ?>
</th>
<th style="text-align:center;">
<?php echo $quantity.' '.$total; ?> <a href="showproducts.php" target="_blank"><i class="fas fa-edit text-danger"></i></a></th>
<th style="text-align:center;">
<?php echo $quantity; ?>
</th>
<th style="text-align:center;">
<?php echo $price.' '.$unit; ?>
</th>
<th style="text-align:center;">
<?php echo $price.' '.$total; ?>
</th>
</tr>
</thead>
<tr>
<td>
<input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm"></td>
</td>
<td>
<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />
</td>
<td>
<div class=""><input id="quantity" name="quantity" readonly type="text" class="form-control form-control-sm"></td>
<td><input id="neededquantity" name="neededquantity" type="text" class="form-control form-control-sm"></td>
<td><input id="sellprice" name="sellprice" type="text" class="form-control form-control-sm sellprice"></td>
<td><input id="totalprice" name="totalprice" readonly type="text" class="form-control form-control-sm"></td>
</tr>
<tbody id="orderTable">
</tbody>
</table>
<center style="padding:10px;">
<button id="add" style="width:150px;" onclick="addRow()" class="btn btn-success">Add</button>
<button id="remove" style="width:150px;" class="btn btn-danger">Remove</button>
</center>
</div>
</div>
Javascript:
function autofill() {
var name = $('input[name=product]').val();
$.ajax({
url: 'gpin.php',
data: 'name=' + name,
success: function(data) {
var json = data;
obj = JSON.parse(json);
$('input[name=quantity]').val(obj.quantity);
$('input[name=sellprice]').val(obj.sellprice);
$('input[name=codebar]').val(obj.code);
}
});
}
function codefetch() {
var code = $("input[name=codebar]").val();
$.ajax({
url: 'gpic.php',
data: 'code=' + code,
success: function(data) {
var json = data;
obj = JSON.parse(json);
$('input[name=product]').val(obj.name);
$('input[name=quantity]').val(obj.quantity);
$('input[name=sellprice]').val(obj.sellprice);
}
});
}
$(document).ready(function() {
$('#prodname').typeahead({
source: function(query, result) {
$.ajax({
url: "prodnameautofill.php",
method: "POST",
data: {
query: query
},
dataType: "json",
success: function(data) {
result($.map(data, function(item) {
return item;
}));
}
})
}
});
});
function calculate() {
var myBox1 = $('input[name=neededquantity]').val();
var myBox2 = $('input[name=sellprice]').val();
var result = $('input[name=totalprice]').val();
var myResult = myBox1 * myBox2;
$('input[name=totalprice]').val(myResult);
var quantity = $('input[name=quantity]').val();
var neededquantity = $('input[name=neededquantity]').val();
var myResult2 = quantity - neededquantity;
if (myResult2 < 0) {
document.getElementsByName('neededquantity').className = ('form-control form-control-sm bg-danger text-light');
} else {
document.getElementsByName('neededquantity')[0].className = ('form-control form-control-sm bg-success text-light');
}
}
function addRow() {
var table = document.getElementById("orderTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = '<input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm">';
cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';
cell3.innerHTML = '<input name="quantity" readonly type="text" class="form-control form-control-sm">';
cell4.innerHTML = '<input name="neededquantity" type="text" oninput="calculate();" class="form-control form-control-sm">';
cell5.innerHTML = '<input name="sellprice" type="text" oninput="calculate();" class="form-control form-control-sm sellprice">';
cell6.innerHTML = '<input name="totalprice" readonly type="text" class="form-control form-control-sm">';
}
是否可以像我打算在我的 jscode 中那样在 javascript 中回显一个 php 变量
cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';
解决方案
基本上PHP在页面存在之前工作(只有在页面被筛选时才完成)并且JavaScript在浏览器读取它时在页面中,因此无法进行通信。相反,您必须使用可以通过异步调用 + 元数据(例如 XML 或 JSON 文件或元文件)来满足它们的 AJAX。
推荐阅读
- python - 无法使用请求解析来自网站的所有下一页链接
- ruby-on-rails - Gem Install Rails Giving Error: Failed To Build Gem Native Exension CentOS
- python - 是否有像 Symfony 控制台组件这样的 Python CLI 包?
- javascript - swtich-case sentece 和 ojbect 的区别包含 Redux 的 reducer 函数中的函数
- c++ - 当我试图在双循环链表之间输入一个节点时,它会给出错误的输出
- testing - 将相同的参数传递给多个测试
- android - 在 Android Studio 中设置 Flutter 时出现问题
- python - Wikipedia-api 如何在 kivy 中滚动页面?
- visual-studio-code - 有没有办法在 VSCode 的资源管理器视图中隐藏问题装饰以进行警告
- java - 无法对内容复制设置为不允许的 PDF 文件执行 OCR