Question

I’m trying to create an HTML form that will add up the prices of various options selected for a product, and then POST to PayPal’s Buy Now function.

Here’s an example of the PayPal buy now form. I’m trying to add the functionality to allow each variation to add up to a final amount before post. Why PayPal doesn’t allow this to begin with is beyond me. No time for a rant though.

Here is paypals example of a Buy Now form with pricing. The issue is that you can only select final price. It doesn’t allow for matrix style pricing.

eg:
Item Price: $50

Variation 1:
— Option A: +$25
— Option B: +$50

Variation 2:
— Option A: +$10
— Option B: +$15

So if you select 1A and 2B the form posts $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="[e-mail]"> 

<!-- 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

Add the following script at your page head or before the form.

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

This solution assume that you have set id attribute value to your form.
Then in every select in your form add onChange event with recordSelect() as follows:

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

Please Notice the passed argument of recordSelect