所以這是我的訂單頁面，我想添加一個選項來防止用戶將數量選項留空。我似乎無法使用所需的選項，因為它迫使用戶填寫每個框而不是剛剛選擇的框。
這是代碼
<body>
<?php include('navbar.php'); ?>
<div class="container">
<h1 class="page-header text-center">ORDER</h1>
<form method="POST" action="purchase.php">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<?php
$sql = "select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";
$query = $conn->query($sql);
$iterate = 0;
while ($row = $query->fetch_array()) {
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>
<td><?php echo $row['catname']; ?></td>
<td><a href="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>"><img src="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>" height="170px" width="80%"></a></td>
<td class="productname1"><?php echo $row['productname']; ?></td>
<td class="price">Rs <?php echo number_format($row['price'], 2); ?></td>
<!-->**HERE IS THE CODE THAT NEEDS TO BE FIXED**--> <td><input type="number" class="form-control" name="quantity<?php echo $iterate; ?>"></td>
</tr>
<?php
$iterate ;
}
?>
</tbody>
</table>
<div class="row">
<div class="col-md-3">
<input type="text" name="customer" class="form-control" placeholder="Customer Name" required>
</div>
<div class="col-md-3">
<input type="number" name="number" class="form-control" placeholder="Contact Number" required>
</div>
<div class="col-md-2" style="margin-left:-20px;">
<button type="submit" onclick="myFunction()" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
<br />
<br />
<br />
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#checkAll").click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
您可以使用 jQuery/JavaScript 定位這些欄位，并通過關注它來使其成為必需，然后阻止表單提交。嘗試這個
$(document).ready(function() {
$('#order-form').submit(function(e){
let $quantities = $(this).find('.table input[type="number"]').filter(function(){
return $(this).closest('tr').find('input[type="checkbox"]').is(':checked') && $(this).val() === '';
})
if( $quantities.length > 0 ){
e.preventDefault();
$quantities.first().focus()
}
})
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
<form method="POST" action="purchase.php" id="order-form">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<tr>
<td class="text-center"><input type="checkbox" value="1" name="productid[]" checked></td>
<td>Dishes</td>
<td><a href=""><img src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Bara" height="170px" width="80%"></a></td>
<td class="productname1">Bara</td>
<td class="price">Rs 79.00</td>
<td><input type="number" class="form-control" name="quantity[]"></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" value="1" name="productid[]"></td>
<td>Dishes</td>
<td><a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Chwela" height="170px" width="80%"></a></td>
<td class="productname1">Chwela</td>
<td class="price">Rs 120.00</td>
<td><input type="number" class="form-control" name="quantity[]"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
</form>
</div>以 OP 要求的格式回答
顯示代碼片段
<body>
<?php include('navbar.php'); ?>
<div class="container">
<h1 class="page-header text-center">ORDER</h1>
<form method="POST" action="purchase.php" id="order-form">
<table class="table table-striped table-bordered">
<thead>
<th class="text-center"><input type="checkbox" id="checkAll"></th>
<th class="productheading">Category</th>
<th class="productheading">Product Image
<th class="productheading">Product Name</th>
<th class="productheading">Price</th>
<th class="productheading">Quantity</th>
</thead>
<tbody>
<?php
$sql = "select * from product left join category on category.categoryid=product.categoryid order by product.categoryid asc, productname asc";
$query = $conn->query($sql);
$iterate = 0;
while ($row = $query->fetch_array()) {
?>
<tr>
<td class="text-center"><input type="checkbox" value="<?php echo $row['productid']; ?>||<?php echo $iterate; ?>" name="productid[]" style=""></td>
<td><?php echo $row['catname']; ?></td>
<td><a href="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>"><img src="<?php if (empty($row['photo'])) {
echo "upload/noimage.jpg";
} else {
echo $row['photo'];
} ?>" height="170px" width="80%"></a></td>
<td class="productname1"><?php echo $row['productname']; ?></td>
<td class="price">Rs <?php echo number_format($row['price'], 2); ?></td>
<td><input type="number" class="form-control" name="quantity<?php echo $iterate; ?>"></td>
</tr>
<?php
$iterate ;
}
?>
</tbody>
</table>
<div class="row">
<div class="col-md-3">
<input type="text" name="customer" class="form-control" placeholder="Customer Name" required>
</div>
<div class="col-md-3">
<input type="number" name="number" class="form-control" placeholder="Contact Number" required>
</div>
<div class="col-md-2" style="margin-left:-20px;">
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Order</button>
<br />
<br />
<br />
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#checkAll").click(function() {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$('#order-form').submit(function(e){
let $quantities = $(this).find('.table input[type="number"]').filter(function(){
return $(this).closest('tr').find('input[type="checkbox"]').is(':checked') && $(this).val() === '';
})
if( $quantities.length > 0 ){
e.preventDefault();
alert("Quantity is required")
$quantities.first().focus()
}
})
});
</script>
</body>uj5u.com熱心網友回復：
如果用戶禁用了 Javascript，您還應該檢查服務器是否缺少數量：
// purchase.php
if (isset($_POST['productid'])) {
for ( $i=0; $i < sizeof($_POST['productid']); $i ) {
if ( $_POST['productid'][$i] && ! $_POST['quantity'][$i] ) {
echo "Missing quantity for " . $_POST['productid'][$i] . "<br>";
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492737.html