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

Question

I'm trying to setup a shopping cart form function (add to cart button) which is called via JavaScript. I have this in a pop-up window and want to have the "add to cart" button both close the pop-up window and also load the info in the main window. Does anyone know what script modifications I need to have?

Here is my current code in the pop-up window to generate the add to cart:

<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>

Answer 1

Ok, so assuming you've included the jquery file somewhere before this in you webpage, this is how I would go about solving the problem you're having;

<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>

get back to me if you're having anymore problems or need a little more direction. I'm South African by the way; and our time is 13:30 right now. . .about to go on my lunch break soon