“Add to cart” with jQuery

Question

The goal

Copy one text and move him to another element.

The problem

I have a list of products on my application and I want to add them in a summary when I click on "add button". Until here, easy, huh?!

The product on summary will be displayed with his name and quantity. So I ask: How can I extract this name from DOM and "paste" in a new place?

But... wait! The problem becomes big when the "add" button is outside of product element. I mean, the "add button" is inside of a tooltip that is on the bottom of the code — has no relationship to the element of the product.

What I thought to do

The tooltip has the follow structure:

<div class="tooltip">
   <form action="">
      <input type="text" name="product_quantity" />
      <button type="submit" />
   </form>
</div>

And I thought to do the following:

<div class="tooltip">
   <form action="">
      <input type="hidden" name="product_id" value="1" />
      <input type="text" name="product_quantity" />
      <button type="submit" />
   </form>
</div>

And then, through jQuery, get an element with that value (in our case, 1 ).

My official code

You can see it on FiddleJS or above:

<ul>
    <li>
        <div class="product-header">
            <h1>Cap</h1>
        </div>
        <div class="product-body">
            <p>A beautiful cap</p>
        </div>
        <div class="product-controls">
            <a href="#">Click here to open the tooltip to select a quantity then add to products summary</a>
        </div>
    </li>
    <li>
        <div class="product-header">
            <h1>Gears of War — The game</h1>
        </div>
        <div class="product-body">
            <p>TPS by Microsoft Studios</p>
            <div class="product-controls">
                <a href="#">Click here to open the tooltip to select a quantity then add to products summary</a>
            </div>
        </div>
    </li>
</ul>
<div class="tooltip" style="display: none;">
    <form action="">
        <input type="text" name="product_quantity" />
        <button type="submit" />
    </form>
</div>

(UPDATE) Maybe... AJAX?!

I got to thinking about the possibility of recovering the product identifier (by tooltip's input hidden) and make a query to the database — but it would be feasible?

Thanks in advance!

Answer 1

// get value of product id with jquery

$('.tooltip button').click(function() {
  alert($('#product_id').val());
});

If you want to use AJAX, try this http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/

Answer 2

I've written some months ago a similar thing based on jQuery: https://github.com/yckart/jquery.animateto.js

Here's a simple demo without any Ajax-request or else

http://yckart.github.com/jquery.animateto.js/