Geek asks and answers

Use jQuery to organize PayPal cart forms

I have a page using the Paypal Payments Standard with buy one now buttons on many of these products.

<form id="form1" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="image" name="submit2" align="right" src="https://www.paypal.com//en_US/i/btn/sc-but-03.gif" alt="Make payments with PayPal - it fast, free and secure!" />
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="business" value="email@gmail.com" />
    <input type="hidden" name="no_note" value="1" />
    <input type="hidden" name="add" value="1" />
    <input type="hidden" name="lc" value="US" />
    <input type="hidden" name="return" value="http://domain.com/confirm.html" />
    <input type="hidden" name="cancel_return" value="http://domain.com" />
    <input type="hidden" name="currency_code" value="USD" />
    <input type="hidden" name="bn" value="PP-ShopCartBF" />
    <input type="hidden" name="amount" value="5.00" />

    <input type="hidden" name="item_name" value="A009" />
</form>

The above code is repeated on the page for each product, where only the form identifier and product number are changed. In this case, all products have the same price.

Before jQuery, I would just put all the duplicate parts in SSI.

However, now I'm learning jQuery, and I would like to reduce it all to a text link instead of the PayPal button and insert the product number into the link. This link would not be between any form tags, if possible.

<a class="cartBuy" href="#" id="A009">Add to Cart</a>

I know that I can select my links like this ...

$('.cartBuy a[id]')

. jQuery ? - ? , ... script -, ( ajax?). jQuery , , , , . , jQuery HTML , , SSI.

( " ", ... .)

!

:

.

  • , , .

  • , .

  • item_name .

+3
1

, , - , , input, :

$('.cartBuy a').click(function(){
    var id = $(this).attr('id'); // gets the item name from the link id
    $('#form1 input[name=item_name]').val(id); // writes the item name to the form field
    $('#form1').submit(); // submits the form

    return false; // prevents the link from being followed
});
+4

More articles:


All Articles