Question

I have a page using Paypal Payments Standard with “buy one now” buttons on many products such as this.

<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's fast, free and secure!" />
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="business" value="[e-mail]" />
    <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 down the page for each product where only the form id’s and product numbers are changed. In this case, all products are the same price.

Before jQuery, I would just put all the repetitive parts within an SSI.

However, now I’m learning jQuery and I’d like to reduce this all to a text link instead of the PayPal button and embed the product number within 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 I can select my links like this…

$('.cartBuy a[id]')

But now I’m a little lost. How can I use jQuery to submit this form? Will I still need to surround my link with form tags? The whole point of this is so that I don’t have to have a unique form for every single product… just a single link for each product and let one script construct something that gets submitted (via ajax?). I looked at the jQuery Form Plugin but I’m lost with this too as it looks like I’d still need to have every item inside a unique form element. I also looked at having jQuery write all the HTML for each form but that’s not really much different than what I was doing before with SSI.

(These are “buy one now” links so there is no need to keep track of multiple selections… simply want to submit each one at a time.)

Thank-you!

---

ANSWER:

I used the Answer below by Josh Leitzel.

1. I included one form element on the page which contained all the hidden input elements common to everything.

2. I totally removed the submit button from the form since it’s not needed.

3. I added a hidden input element to the one form for the item_name with a blank value.

Answer 1

The way you would do this would be to select the reference ID from the link when it’s clicked, write it to the appropriate form input, and then submit the form:

$('.cartBuy a').click(function(){
    var id = $(this).attr('id'); // gets the item name from the link's 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
});