使用jQuery简化PayPal Cart表单

时间:2011-05-23 17:20:56

标签: forms jquery paypal submit

我有一个页面使用 Paypal付款标准“立即购买”按钮在许多产品上。

<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的一个表单中添加了一个隐藏的输入元素,其中包含空值。

1 个答案:

答案 0 :(得分:4)

您这样做的方法是在点击链接时从链接中选择引用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
});