javascript - 表的每一行上的提交按钮，将该行的数据插入数据库

Question

如您所见，我有这个页面，每个表格行上都有“添加到购物车”按钮。假设我在产品 ID 为 1 的表行中单击“添加到购物车”，我希望将产品 ID、产品名称、购物车数量转移到另一个网页上的购物车。是否可以？

好的，如您所见，我想将数量为 3 的产品 ID 1 添加到我的购物车。但是当我按下添加到购物车时

它总是运行到我的最后一个 productid，即 shofffwef，并将其添加到购物车。不确定出了什么问题:(

这是我添加到购物车按钮的 sql 代码

if(isset($_POST['insert'])){ //$_POST[X] X = name of textbox (***You got to do this In BASHOP) take note the productname.               
    $queryinsert = "insert into cart(productid,productname,cartquantity,amount) SELECT productid,productname,'$_POST[cartquantity]', '50' FROM product WHERE productid='$_POST[hidden]'";       
           mysqli_query($dbconn,$queryinsert);                                                 
    }

这是我的代码，用于显示第一张图片中的表格。

    while($row = mysqli_fetch_array($result)) {   
    echo "<tr>";
    echo "<td>"."<input type = 'text' name='productid' value=". $row['productid'] ."></td>";
    echo "<td>"."<input type = 'text' name='productname' value=". $row['productname'] ."></td>";
    echo "<td>" . $row['retailprice'] . "</td>";
    echo "<td>" . $row['pointsformula'] . "</td>";
    echo "<td>"."<button type='button' class='quantityaddsub' id='sub' onclick='quantitysub(".$row['productid'].")'>-</button>".
                    "<input type='text' class='quantity' name='cartquantity' id='quantity".$row['productid']."' value=1>".
                    "<button type='button' class='quantityaddsub' id='add' onclick='quantityadd(".$row['productid'].")'>+</button>".
    "<input type='hidden' name='hidden' value=".$row['productid']."></td>";
    echo "<td>" . "<input type='submit' name='insert' value='Add To Cart'" . "></td>";
    echo "</tr>";
}
echo "</table>";

找遍了都没有找到解决方法，求大神指点，谢谢!

Answer 1

其实你不需要<form>每行上的标签——事实上，您可能不需要 <form>如果您使用 AJAX 提交表单，则根本不需要标记。即使你以表单的形式提交，也只需要一组<form>标签。

不过，您确实需要一些 javascript 来管理添加到购物车的过程。

jsFiddle Demo

基本上，您需要创建软cart在页面本身上。为此，您可以使用 javascript 变量或隐藏的输入字段。让我们使用一个隐藏的输入字段并暂时不隐藏它，这样您就可以看到发生了什么:

<form id="tcform" method="post" action="checkout.php">
    <input type="text" id="tempcart" /><!-- when ready, change to type="hidden" -->
</form>

每次单击 AddToCart 按钮时，它都会将该 TR 的 ID 添加到购物车。为了使事情更简单，让我们为每个 TR 创建一个 ID，将 productID 添加为该 TR ID 的组成部分:

$out = "<table>";
while($row = mysqli_fetch_array($result)) {   
    $out .= "<tr id='tr_" .$row['productid']. "'>";
    $out .= "<td>"."<input type = 'text' name='productid' value=". $row['productid'] ."></td>";
    $out .= "<td>"."<input type = 'text' name='productname' value=". $row['productname'] ."></td>";
    $out .= "<td>" . $row['retailprice'] . "</td>";
    $out .= "<td>" . $row['pointsformula'] . "</td>";
    $out .= "<td>"."<button type='button' class='quantityaddsub' id='sub' onclick='quantitysub(".$row['productid'].")'>-</button>".
                    "<input type='text' class='quantity' name='cartquantity' id='quantity".$row['productid']."' value=1>".
                    "<button type='button' class='quantityaddsub' id='add' onclick='quantityadd(".$row['productid'].")'>+</button>".
    "<input type='hidden' name='hidden' value=".$row['productid']."></td>";
    $out .= "<td>" . "<input type='submit' name='insert' value='Add To Cart'" . "></td>";
    $out .= "</tr>";
}
$out .= "</table>";
echo $out;

现在，每个 TR 都有一个像这样的 ID:tr_17

您的 AddToCart 代码可能如下所示:

$('.btnAddToCart').click(function(){
    var thisTR = $(this).closest('tr');
    thisTR.addClass('clicked'); //optional - use CSS to color row
    var trid = thisTR.attr('id'); //tr_17
    trid = trid.split('_')[1]; //17
    $('#tempcart').val( $('#tempcart').val() +'|'+ trid);
};

当点击 CHECKOUT 按钮时，您可以使用 javascript 代替发送 tcform:

$('#btnCheckout').click(function(){
    $('#tcform').submit();
});

请注意，上面的示例使用了 jQuery，所以一定要包含它的库:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

---

最后的注意事项:当您对此类项目进行故障排除时，请将其分解为多个步骤。 checkout.php页面(或任何你的页面)应该首先使用硬编码值进行测试。

一旦它可靠地将硬编码值放入数据库，接下来测试它接收到的数据。通过创建一个虚拟 checkout.php 来做到这一点页面只是将它通过 $_POST 接收到的数据回显到屏幕上.一旦你确定这两个部分都能正常工作，然后将它们放在一起......希望它能在第一次工作。如果没有，至少您知道什么在起作用，并且调试工作更简单/更快。

祝你好运。