>我有两个函数可以执行以下操作： myFunction() 将变量发送到结帐 myFunction2() 将产品添加到购物车并继续购物车。 该框架要求在继续结帐之前将产品添加到购物车。 我正在努力通过一次点击让这两个功能按顺序添加。
有三种可能的输入(用于测试)，即： "添加到购物车" - 使用 href 将产品添加到购物车(正确提交) "提交表单" - 如果产品已添加到购物车，则会将变量发送到结帐，但由于"添加到购物车"已进入购物车页面，因此您必须返回表单才能运行。(正确提交，但须符合上述规定) "点击" - 尝试将这两个功能结合起来？，路由到购物车页面并说购物车中没有商品 - 所以没有按预期工作。
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<?php $postvalue = array (12,2,3,"7 days"); ?>
<form id="myForm" action="index.php?route=checkout/checkout" method="post">
First name:
<br>
<input type="text" name="product_id" value="30">
<?php
foreach($postvalue as $onx)
{
echo '<input type="hidden" name="onx[]" value="'. $onx . '">';
} ?>
<br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
</body>
<!-- THIS FUNCTION WORKS TO ADD A PRODUCT TO Cart -->
<a href='index.php?route=checkout/cart/addToCart&product_id=30' id="addtocart" onclick="myFunction2();">Add to Cart</a>
<br />
<script>
function myFunction2() {
document.getElementById("addtocart");
}
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</html>
我希望能够将产品添加到购物车，并以正确的顺序将变量发布到结帐，以便进一步执行代码。
不是通过访问 URL 来添加产品，而是使用 AJAX 发出同步请求并在保持在同一页面的同时添加产品。因此，请删除 href 属性。 (我使用return false;来防止 onclick 事件的默认事件处理)
<a href="#" id="addtocart" onclick="myFunction2(); return false;">Add to Cart</a>
并在单击处理程序中添加代码以执行请求。 当请求成功返回时，您只需在窗体中添加一个类，这样您就会知道产品已添加。 (在示例中，我将jQuery用于AJAX调用)。
function myFunction2() {
$.get( "index.php?route=checkout/cart/addToCart&product_id=30", function( data ) {
$( "#myForm" ).addClass( "product-added" );
});
}
在提交表格之前，只需检查产品是否已添加到购物车
function myFunction() {
if($( "#myForm" ).hasClass( "product-added" )){
document.getElementById("myForm").submit();
}
}