表单操作不适用于表单内的 table
Form action not working with table inside form
我在这样的表单中有一个 table：
<form action="file.php" id="myform" method="POST">
<div class="table-responsive ">
<table class="table table-hover" id="tblDetalle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Quant.</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody">
<?php
if(!isset($_SESSION['products'])){
}else{
foreach($_SESSION['products'] as $product=>$details){
echo '
<tr class="txtMult">
<th scope = "row">'.$details["code_product"].'</th>
<th scope = "row">'.$details["name_product"].'</th>
<td><input class="val2" type="number" id="quantity" name="quantity" min="1" max="100"></td>
<td class="val1">'.$details["price"].'</td>
<td><span class="multTotal">0.00</span></td>
</tr>
';
};
}
?>
</tbody>
<tfoot>
<tr class="font-weight-bold">
<td colspan=4>Total <span id="grandTotal">0.00</span></td>
<td></td>
</tr>
</tfoot>
</table>
<input type="submit" value="Submit"/>
</div>
</form>
我的实际问题是提交按钮不起作用，当我单击按钮时没有执行任何操作。
我的想法是通过POST方法将table的所有内容发送到file.php。
有一个脚本最后更新为价格*数量，但我认为问题不存在。
<script type="text/javascript">
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = parseInt($('.val1', this).text())
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
</script>
有人可以帮忙吗？ :)
可以在表单内使用 tables，但我认为您的方法是错误的。您可以将 table 放在表单中，反之亦然，这样做通常很有用。但是你需要明白你在做什么。
表格和表单可以任意嵌套。但是，如果将表单放入 tables 中，则每个表单都必须完全包含在一个 table 单元格中（实际上是一个 TD 元素）。因此，每个表格都是完全独立的。
因此，请尝试将表格放入需要输入
的 table 单元格中
一旦 HTML 中的小错字被更正并且没有你的 PHP 逻辑（无法测试它 - 因此硬编码虚拟数据）你可以做的是使用 Javascript 来发送表单数据，而不是依赖常规的表单提交，因为这里对您来说是失败的。 HTML 内容和文本不会通过表单发送 - 只有来自 input 元素的内容，因此您的表单将提交一个名为 quantity 的字段，这不是您想要的。
以下使用 fetch 将 formData 发送到您想要的 PHP 脚本。
$(document).ready(function () {
function multInputs() {
var mult = 0;
$("tr.txtMult").each(function () {
var $val1 = parseInt($('.val1', this).text())
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
return mult;
}
const submithandler=(e)=>{
// stop the regular `submit`
e.preventDefault();
// add form data to these variables
let fd=new FormData();
let payload=[];
// process the contents of the HTML table to populate the formData object
$("tr.txtMult").each(function(){
let item={
code:this.firstElementChild.textContent,
name:this.firstElementChild.nextElementSibling.textContent,
value:$('.val2', this).val()
};
// convert object to string
payload.push( JSON.stringify(item) );
});
fd.set('payload', payload );
// send the request
fetch( document.getElementById('myform').action,{ method:'post', body:fd })
.then( r=>r.text() )
.then( text=>{
alert( text )// do stuff with results?
})
.catch( err=>console.log('Error:%o',err) )
};
$(".txtMult input").keyup(multInputs);
$('[type="submit"]').click(submithandler);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="file.php" id="myform" method="POST">
<div class="table-responsive ">
<table class="table table-hover" id="tblDetalle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Quant.</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<!-- Hardcoded example data -->
<tr class="txtMult">
<th scope = "row">Code ABC-1</th>
<th scope = "row">Name - 1</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">100</td>
<td><span class="multTotal">0.00</span></td>
</tr>
<tr class="txtMult">
<th scope = "row">Code ABC-2</th>
<th scope = "row">Name - 2</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">200</td>
<td><span class="multTotal">0.00</span></td>
</tr>
<tr class="txtMult">
<th scope = "row">Code ABC-3</th>
<th scope = "row">Name - 3</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">300</td>
<td><span class="multTotal">0.00</span></td>
</tr>
</tbody>
<tfoot>
<tr class="font-weight-bold">
<td colspan=4>Total <span id="grandTotal">0.00</span></td>
<td></td>
</tr>
</tfoot>
</table>
<input type="submit" />
</div>
</form>
我在这样的表单中有一个 table：
<form action="file.php" id="myform" method="POST">
<div class="table-responsive ">
<table class="table table-hover" id="tblDetalle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Quant.</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody">
<?php
if(!isset($_SESSION['products'])){
}else{
foreach($_SESSION['products'] as $product=>$details){
echo '
<tr class="txtMult">
<th scope = "row">'.$details["code_product"].'</th>
<th scope = "row">'.$details["name_product"].'</th>
<td><input class="val2" type="number" id="quantity" name="quantity" min="1" max="100"></td>
<td class="val1">'.$details["price"].'</td>
<td><span class="multTotal">0.00</span></td>
</tr>
';
};
}
?>
</tbody>
<tfoot>
<tr class="font-weight-bold">
<td colspan=4>Total <span id="grandTotal">0.00</span></td>
<td></td>
</tr>
</tfoot>
</table>
<input type="submit" value="Submit"/>
</div>
</form>
我的实际问题是提交按钮不起作用，当我单击按钮时没有执行任何操作。 我的想法是通过POST方法将table的所有内容发送到file.php。
有一个脚本最后更新为价格*数量，但我认为问题不存在。
<script type="text/javascript">
$(document).ready(function () {
$(".txtMult input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $val1 = parseInt($('.val1', this).text())
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
}
});
</script>
有人可以帮忙吗？ :)
可以在表单内使用 tables，但我认为您的方法是错误的。您可以将 table 放在表单中，反之亦然，这样做通常很有用。但是你需要明白你在做什么。
表格和表单可以任意嵌套。但是，如果将表单放入 tables 中，则每个表单都必须完全包含在一个 table 单元格中（实际上是一个 TD 元素）。因此，每个表格都是完全独立的。 因此，请尝试将表格放入需要输入
的 table 单元格中一旦 HTML 中的小错字被更正并且没有你的 PHP 逻辑（无法测试它 - 因此硬编码虚拟数据）你可以做的是使用 Javascript 来发送表单数据，而不是依赖常规的表单提交，因为这里对您来说是失败的。 HTML 内容和文本不会通过表单发送 - 只有来自 input 元素的内容，因此您的表单将提交一个名为 quantity 的字段，这不是您想要的。
以下使用 fetch 将 formData 发送到您想要的 PHP 脚本。
$(document).ready(function () {
function multInputs() {
var mult = 0;
$("tr.txtMult").each(function () {
var $val1 = parseInt($('.val1', this).text())
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.multTotal',this).text($total);
mult += $total;
});
$("#grandTotal").text(mult);
return mult;
}
const submithandler=(e)=>{
// stop the regular `submit`
e.preventDefault();
// add form data to these variables
let fd=new FormData();
let payload=[];
// process the contents of the HTML table to populate the formData object
$("tr.txtMult").each(function(){
let item={
code:this.firstElementChild.textContent,
name:this.firstElementChild.nextElementSibling.textContent,
value:$('.val2', this).val()
};
// convert object to string
payload.push( JSON.stringify(item) );
});
fd.set('payload', payload );
// send the request
fetch( document.getElementById('myform').action,{ method:'post', body:fd })
.then( r=>r.text() )
.then( text=>{
alert( text )// do stuff with results?
})
.catch( err=>console.log('Error:%o',err) )
};
$(".txtMult input").keyup(multInputs);
$('[type="submit"]').click(submithandler);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="file.php" id="myform" method="POST">
<div class="table-responsive ">
<table class="table table-hover" id="tblDetalle">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Name</th>
<th>Quant.</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<!-- Hardcoded example data -->
<tr class="txtMult">
<th scope = "row">Code ABC-1</th>
<th scope = "row">Name - 1</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">100</td>
<td><span class="multTotal">0.00</span></td>
</tr>
<tr class="txtMult">
<th scope = "row">Code ABC-2</th>
<th scope = "row">Name - 2</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">200</td>
<td><span class="multTotal">0.00</span></td>
</tr>
<tr class="txtMult">
<th scope = "row">Code ABC-3</th>
<th scope = "row">Name - 3</th>
<td><input class="val2" type="number" name="quantity" min="1" max="100"></td>
<td class="val1">300</td>
<td><span class="multTotal">0.00</span></td>
</tr>
</tbody>
<tfoot>
<tr class="font-weight-bold">
<td colspan=4>Total <span id="grandTotal">0.00</span></td>
<td></td>
</tr>
</tfoot>
</table>
<input type="submit" />
</div>
</form>