javascript - 在 Paypal“添加到购物车”按钮中插入下拉菜单、文本字段和复选框

Question

这是我的第一篇文章，所以请耐心等待。

我正在尝试设置一个“添加到购物车”按钮，该按钮能够通过下拉菜单、一些文本字段和一些复选框来托管客户提供的信息。因此，一旦客户从下拉菜单中选择一个条目，在文本字段中插入信息并标记复选框，卖家就能够一起接收所有信息。我已经能够包含下拉菜单和文本字段。

我无法执行以下操作：

• 设置复选框

• 找到一种方法来确保对于每一行（例如下图中的第 1 行和第 2 行），只选择一个复选框（不能多选）

• 如果未提供所有信息，请找到显示警告消息的方法。这意味着如果客户没有从下拉菜单中选择项目类型（下图中的“衬衫”）（第一个条目是固定的“选择项目”）或将任何文本字段或复选框留空，则会出现警告显示“请提供所有信息”之类的消息。

我不期待使用 php 或其他，所以我的问题是，我如何使用 html 和 JavaScript 来做到这一点？

我在这里附上我正在寻找的图像。在图像中只有 4 个文本字段和 6 个复选框（每行 3 个），但文本字段会更多。复选框专用的行应该是 3 到 5。每行将有 3 个复选框，如图所示：

这是到目前为止的代码（不使用 JavaScript）

<form method="post" action="https://www.paypal.com/cgi-bin/webscr" target="self">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="country" value="US">
<input type="hidden" name="add" value="1">
<input type="hidden" name="shopping_url" value="http://www.example.com">
<input type="hidden" name="business" value="[e-mail]">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="item_name" value="Customization for item">
<input type="hidden" name="amount" value="8.00">
<table><tr><td>
<input type="hidden" name="on0" value="Item type">Item type</td>
    <td>
    <select name="os0">
    <option value="select item">SELECT ITEM
    <option value="Shirt">Shirt
    </select></td>
</tr></table>
<br>

First Name:&nbsp;&nbsp;
<input type="hidden" name="on0" value="First Name">
<input type="text" name="os0" size="20">
<br><br>
Last Name:&nbsp;&nbsp;
<input type="hidden" name="on1" value="Last Name">
<input type="text" name="os1" size="20">
<br><br>
Favorite color:&nbsp;&nbsp;
<input type="hidden" name="on2" value="Favorite color">
<input type="text" name="os2" size="20">
<br><br>
Favorite pet:&nbsp;&nbsp;
<input type="hidden" name="on3" value="Favorite pet">
<input type="text" name="os3" size="20">
<br><br>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and 

secure!">
</form>

标签： javascriptbuttonpaypal