使用“添加到购物车”按钮关闭弹出窗口答案

【问题标题】：pop-up window close with "add to cart" button使用“添加到购物车”按钮关闭弹出窗口
【发布时间】：2013-12-09 19:36:24
【问题描述】：

我正在尝试设置一个通过 JavaScript 调用的购物车表单功能（添加到购物车按钮）。我在弹出窗口中有这个，并希望“添加到购物车”按钮既关闭弹出窗口，又在主窗口中加载信息。有谁知道我需要进行哪些脚本修改？

这是我当前在弹出窗口中生成添加到购物车的代码：

<form class="cart" action="index-shop.php" method="post">
    <input type="hidden" name="my-item-id" value="book 1" />
    <input type="hidden" name="my-item-name" value="book 1" />
    <input type="hidden" name="my-item-price" value="35.00" />
    <input type="hidden" name="my-item-url" value="http://www.amazoni.com" />
    Qty: <input type="text" name="my-item-qty" value="1" size="3" />
    <input class="button" type="submit" name="my-add-button" value="add to cart" />
</form>

【问题讨论】：

在here上使用jquery ui对话框
执行“添加到购物车”按钮的代码在哪里？如果你没有，那么窗口总是会关闭，这是默认行为。你在用jquery吗？如果不是，你应该！世界其他地方是。您想在将产品添加到购物车的代码执行后返回 false
你必须使用 ajax 来发布表单并从表单标签中取出操作和方法
这可以通过javascript完成吗？任何人都有任何代码......不太确定jquery对话框 - 因为最初是从一个图像映射链接触发的，该链接弹出带有添加到购物车按钮的窗口，如上面的代码。
嗨，Gabe，对不起，我一定是睡着了，或者工作真的很忙，我会发布答案，但前提是您使用 jquery 很舒服。你同意吗？

标签： javascript php

【解决方案1】：

好的，所以假设您已经在网页中之前的某处包含了 jquery 文件，这就是我将如何解决您遇到的问题的方法；

<form class="cart">
   <input type="hidden" name="my-item-id" value="book 1" />
   <input type="hidden" name="my-item-name" value="book 1" />
   <input type="hidden" name="my-item-price" value="35.00" />
   <input type="hidden" name="my-item-url" value="http://www.amazoni.com" />
   Qty: <input type="text" name="my-item-qty" value="1" size="3" />
   <input class="button" type="submit" id="my-add-button" name="my-add-button" value="add to cart" />
</form>
<script type="type/JavaScript">
   $(document).ready(function(){
      $(".cart").submit(function(e){
         e.preventDefault(); //prevent the form from submitting
      });

      //send the form to the server mimicking the post behaviour, without submitting the form
      $("#my-add-button").click(function(){
         $.post("index-shop.php", $(".cart").serialize(), function(data){
            if(data.success){ // this is assuming you created a variable indicating whether server processing succeeded
               /*
               * here we insert the post server processing code
               * and then we close the dialog
               */
            }else{
               alert(data.error); //if there's an error we display the error message and keep the dialog window open allowing the user to continue
            }
         });

         return false;
      });
   });
</script>

如果您还有问题或需要更多指导，请回复我。顺便说一句，我是南非人；我们现在的时间是 13:30。 . .即将去我的午休时间

【讨论】：