使用 jQuery 简化 PayPal 购物车表单

发布于 2024-11-08 20:47:00 字数 2240 浏览 0 评论 0原文

我有一个使用 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 protected]" />
    <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 表单插件但我也迷失了它，因为它看起来就像我仍然需要将每个项目都放在唯一的表单元素中一样。我还考虑过让 jQuery 为每个表单编写所有 HTML，但这与我之前使用 SSI 所做的并没有太大不同。

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

谢谢！

答案：

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

我在页面上包含了一个表单元素，其中包含所有内容通用的所有隐藏输入元素。
我完全从表单中删除了提交按钮，因为不需要它。
我在 item_name 的一个表单中添加了一个隐藏的输入元素，其值为空。

原文

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="[email protected]" />
    <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.

I included one form element on the page which contained all the hidden input elements common to everything.
I totally removed the submit button from the form since it's not needed.
I added a hidden input element to the one form for the item_name with a blank value.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小情绪 2024-11-15 20:47:00

执行此操作的方法是在单击链接时从链接中选择参考 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
});

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
});

回复收藏 0 原文

~没有更多了~