使用 jQuery 简化 PayPal 购物车表单

Question

我有一个使用 Paypal Payments Standard 的页面，在许多产品上都有“立即购买”按钮。

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

上述代码在每个产品的页面下方重复，其中仅更改了表单 ID 和产品编号。在这种情况下，所有产品都是相同的价格。

在 jQuery 之前，我只是将所有重复的部分放在一个 SSI 中。

但是，现在我正在学习 jQuery，我想将这一切简化为文本链接而不是 PayPal 按钮，并将产品编号嵌入链接中。如果可能，此链接不会在任何表单标签之间。

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

我知道我可以像这样选择我的链接...

$('.cartBuy a[id]')

但现在我有点迷路了。如何使用 jQuery 提交此表单？我还需要用表单标签包围我的链接吗？这样做的重点是，我不必为每个产品都有一个唯一的表单......每个产品只需一个链接，让一个脚本构建提交的东西（通过 ajax？）。我查看了 jQuery Form Plugin，但我也对此感到迷茫，因为看起来我仍然需要将每个项目都放在一个独特的表单元素中。我还研究了让 jQuery 为每个表单编写所有 HTML，但这与我之前使用 SSI 所做的并没有太大不同。

（这些是“立即购买”链接，因此无需跟踪多个选择...只需一次提交每个选择。）

谢谢！

---

回答：

我使用了以下 Josh Leitzel 的答案。

1. 我在页面上添加了一个表单元素，其中包含所有通用的隐藏输入元素。

2. 我完全从表单中删除了提交按钮，因为它不需要。

3. 我在 item_name 的一个表单中添加了一个隐藏的输入元素，其中包含一个空白值。

Answer 1

执行此操作的方法是在单击链接时从链接中选择参考 ID，将其写入适当的表单 input，然后提交表单：

$('.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
});