HTML form that automatically adds and then POST

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

score 1 · Accepted Answer · 2012-07-29T22:09:53.930

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

@LukePighetti but your code there contains one select list? However, the code I regarded before, may have a bug, If the user select from a list A then he changed his mind and decided to change another item from the list A, then the form will be submited without regarding the value of list B is changed or not! To bypass this issue: selects should be an array i.e selects = array(0,0); Then the recordSelect() should accept parameter will acts as a numerical key for the array and it should called with it. Please look at the edit of the answer after a moment. — , Jul 29 '12 at 22:05

score 0 · Answer 2 · answered Jul 29 '12 at 21:52

I hope that your question is theoretical, because calculating prices on a web page is completely insecure. Anyone who knows the wget command can spoof a post that would order the goods at arbitrary prices -- even free.

Here's a much better way.

Keep the shopping cart on the server. Whenever you display the cart on the web page, issue a one-time ticket that identifies the cart and lets the user post once. Be sure to remove all regularity from the ticket -- no visible timestamps, serial numbers, or the like. It is probably best to encrypt or hash the ticket before attaching it to the result. Also, make sure that the ticket is good for a limited time -- say 5 minutes, so that a stolen ticket has a short shelf life.
Do all price calculations on the server so the user cannot fool your server into giving unauthorized discounts.

This technique, and others like it, are called Representational State Transfer, or ReST. Here's a great description: http://en.wikipedia.org/wiki/REST

Best wishes for a successful venture.

Thanks Eric, we are trying to use PayPal's built in buy now function because we are a site with three different vendors with only a single product each. I agree completely that this method is not secure. What we were thinking of recently is to just have a client post an HTML form to a php file on the server, which would then tally up the prices accordingly and post a new form to PayPal directly from server side. The problem is I don't know how PayPal could handle this and make it work, since Buy Now forms are client posted usually from what I can tell. Also thank you for the kind words — Luke Pighetti, Jul 29 '12 at 22:12
If you are using PHP, look into [cURL](http://php.net/manual/en/book.curl.php), which will allow you to generate a POST request to a website in PHP. If you are doing an ASP.NET application, look at the [`WebClient`](http://stackoverflow.com/questions/8222092/sending-http-post-with-system-net-webclient) client. — saluce, Jul 29 '12 at 22:29

HTML form that automatically adds and then POST

2 Answers2