Question

I have 3 separate paypal buttons created. One for small, medium and large (all different prices)

the small, medium and large are images on my website S, M & L.

I want a customer to select S, M or L but these are all different prices so I want the ‘add to cart’ button to update automatically depending on what the customer selects. How can i do this.

Answer 1

If you choose to use jQuery, this can be accomplished with ease.

First, include jquery with this line:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Now use the code below. Give each image the ID of it’s size (small, medium or large) and when that image is clicked the correct form will show. Remember to paste the correct form fields into the correct spaces.

<script>    
    $('#small').click(function(){
        $('.paypalForm').hide();
        $('#smallForm').show();
    });
    $('#medium').click(function(){
        $('.paypalForm').hide();
        $('#mediumForm').show();
    });
    $('#large').click(function(){
        $('.paypalForm').hide();
        $('#largeForm').show();
    });
</script>

<form id="smallForm" class="paypalForm" target="paypal" action="paypal.com/cgi-bin/webscr" method="post">
    ...
</form>


<form id="mediumForm" class="paypalForm" target="paypal" action="paypal.com/cgi-bin/webscr" method="post">
    ...
</form>


<form id="largeForm" class="paypalForm" target="paypal" action="paypal.com/cgi-bin/webscr" method="post">
    ...
</form>