javascript - 自动添加然后POST的HTML表单

Question

我正在尝试创建一个 HTML 表单，它将为产品选择的各种选项的价格相加，然后发布到 PayPal 的“立即购买”功能。

这是 PayPal 立即购买表单的示例。我正在尝试添加功能以允许每个变体在发布前加起来达到最终数量。为什么 PayPal 不允许这样开始是超出我的范围。不过没有时间咆哮。

这是带有定价的“立即购买”表单的 Paypal 示例。问题是您只能选择最终价格。它不允许矩阵式定价。

例如:商品价格:50 美元

变化一:
--- 选项 A:+$25
--- 选项 B:+50 美元

变体2:
--- 选项 A:+$10
--- 选项 B:+15 美元

因此，如果您选择 1A 和 2B，则表单会显示 $50 + $25 + $15 = $90

<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> 

<!-- Identify your business so that you can collect the payments. --> 
<input type="hidden" name="business" value="herschelgomez@xyzzyu.com"> 

<!-- Specify a Buy Now button. --> 
<input type="hidden" name="cmd" value="_xclick"> 

<!-- Specify details about the item that buyers will purchase. --> 
<input type="hidden" name="item_name" value="Hot Sauce"> 
<input type="hidden" name="currency_code" value="USD"> 

<!-- Provide a dropdown menu option field. --> 
<input type="hidden" name="on0" value="Type">Type of sauce <br /> 
    <select name="os0">  
        <option value="Select a type">-- Select a type --</option> 
        <option value="Red">Red sauce</option> 
        <option value="Green">Green sauce</option> 
    </select> <br /> 

<!-- Provide a dropdown menu option field with prices. --> 
<input type="hidden" name="on1" value="Size">Size <br /> 
    <select name="os1"> 
        <option value="06oz">6 oz. bottle - $5.95 USD</option> 
        <option value="12oz">12 oz. bottle - $9.95 USD</option> 
         <option value="36oz">3 12 oz. bottles - $19.95 USD</option> 
    </select> <br /> 

<!-- Specify the price that PayPal uses for each option. -->  
<input type="hidden" name="option_index" value="1"> 
<input type="hidden" name="option_select0" value="06oz"> 
<input type="hidden" name="option_amount0" value="5.95"> 
<input type="hidden" name="option_select1" value="12oz"> 
<input type="hidden" name="option_amount1" value="9.95"> 
<input type="hidden" name="option_select2" value="36oz"> 
<input type="hidden" name="option_amount2" value="19.95"> 

<!-- Display the payment button. --> 
<input type="image" name="submit" border="0" 
    src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" 
    alt="PayPal - The safer, easier way to pay online"> 
<img alt="" border="0" width="1" height="1" 
    src="https://www.paypal.com/en_US/i/scr/pixel.gif" > 
</form>

Answer 1

在页面头部或表单之前添加以下脚本。

<script>
            selects = array(0,0);
            function recordSelect(i){
                ++selects[i];
    if (selects[i] > 1) selects[i] = 1;
                if (selects[0] == 1 && selects[1] == 1 ) document.getElementById('#YourformId').submit();
            }
        </script>

此解决方案假设您已将 id 属性值设置为您的表单。然后在表单中的每个选择中添加带有 recordSelect() 的 onChange 事件，如下所示:

<select name="os0" onchange="recordSelect(0)">  
    <option value="Select a type">-- Select a type --</option> 
    <option value="Red">Red sauce</option> 
    <option value="Green">Green sauce</option> 
</select> 

<select name="os1" onchange="recordSelect(1)">  
        <option value="Select a type">-- Select a type --</option> 
        <option value="another">something</option> 
        <option value="another2">item</option> 
    </select> 

请注意recordSelect传递的参数