我正在嘗試將資料發布到 php 檔案。
假設 php 結果中列出了大約 20 個產品 (P1 - P20)。
當我們點擊 P5 的添加到購物車按鈕時，它應該將所選 P5 的數量和產品 ID 發布到 pre-cart.php
但它發布了第一個結果，即 P1
我使用了以下代碼：
<?php
...
if($query->rowCount() > 0)
{
foreach($results as $result)
{?>
<form>
<input class="qty-text" type="text" id="order" name="order" value="<?php echo htmlentities($result->minor);?>">
<input class="qty-text" type="hidden" type="text" id="product" name="product" value="<?php echo htmlentities($result->proid);?>">
<button type="submit" class="btn btn-primary" onclick="return clickButton();">Add to Cart</button></form>
<?php }} ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function clickButton(){
var quantity=document.getElementById('order').value;
var product=document.getElementById('product').value;
$.ajax({
type:"post",
url:"pre-cart.php",
data:
{
'quantity' :quantity,
'product' :product
},
cache:false,
success: function (html)
{
alert('Data Send');
$('#msg').html(html);
}
});
return false;
}
</script>
uj5u.com熱心網友回復：
您的 PHP 代碼正在生成多個表單。這意味著您將擁有多個具有相同 ID 的輸入。這在 HTML 中無效 - 根據定義，ID 必須是唯一的。因此，當您運行類似 時document.getElementById('order').value，它將始終選擇它找到的具有該 ID 的第一個元素 - 所有其他元素都被視為錯誤并被忽略。
無論如何，由于<form每組資料都有一個單獨的資料集，因此您無需為每個欄位挑選具有特定代碼的值。
相反，只需處理表單的“提交”事件并讓 jQuery 自動序列化其中的所有資料，準備通過 AJAX 發送到服務器。
像這樣。請注意對 HTML 和 jQuery 代碼的更改。
<?php
...
if($query->rowCount() > 0)
{
foreach($results as $result)
{?>
<form class="cartForm">
<input class="qty-text" type="text" name="quantity" value="<?php echo htmlentities($result->minor);?>">
<input class="qty-text" type="hidden" type="text" name="product" value="<?php echo htmlentities($result->proid);?>">
<button type="submit" class="btn btn-primary">Add to Cart</button>
</form>
<?php
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".cartForm").submit(function(event) { //handle "submit" event of the form
event.preventDefault(); //prevent default postback
$.ajax({
type:"post",
url:"pre-cart.php",
data: $(this).serialize(), //auto-serialize the form data
cache:false,
success: function (html)
{
alert('Data Sent');
$('#msg').html(html);
}
});
});
});
</script>
檔案：
- 提交事件：https : //api.jquery.com/submit/
- 序列化函式：https : //api.jquery.com/serialize/
uj5u.com熱心網友回復：
如果你有 20 個結果，當你查看頁面源代碼時，你會看到你有 20 個 html 元素，它們具有相同的 輸入標簽，id="order" 和 id="product"。因此，當您使用以下行時
var quantity=document.getElementById('order').value;
javascript 只是抓取匹配 id="order" 的第一個元素，而不是獲取最接近您點擊的按鈕的訂單和產品輸入。
為了解決這個問題，如果您使用的是Jquery，您可以像這樣獲取最接近您點擊的按鈕的元素
function clickButton(){
var quantity= $(this).closest('input[id="order"]').val();
var product= $(this).closest('input[id="product"]').val();
//rest of your code here
}
您可以在此處閱讀有關 Jquery Closest 的更多資訊：https : //www.w3schools.com/jquery/traversing_closest.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381394.html
標籤：javascript php 查询 阿贾克斯