HTML Paypal Button Integration

Question

I'm trying to create a buy button using Paypal with base price and multiple drop downs that add to the price. For some reason it's only adding the price from one drop down and not all three. Any help would be much appreciated.

HTML code:

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="XXXXX">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="test">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
Base Price:<div id="base_price" value="18.00">18.00</div>

<input id="final_amount" name="amount" type="hidden" value="18">
<input type="hidden" name="weight_unit" value="lbs">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted"><br>



<table>
<tr><td><input type="hidden" name="on1" value="VG/PG Ratio">VG/PG Ratio</td></tr><tr><td><select name="os3">1
    <option value="70/30">70/30 </option>
    <option value="80/20">80/20 </option>
    <option value="90/10">90/10 </option>
</select> </td></tr>
</table>


<table>
<tr><td><input type="hidden" name="on2" value="Nicotine">Nicotine</td></tr><tr><td><select name="os4">
    <option value="0 mg">0 mg </option>
    <option value="3 mg">3 mg </option>
    <option value="6 mg">6 mg </option>
    <option value="9 mg">9 mg </option>
    <option value="12 mg">12 mg </option>
</select> </td></tr>
</table>


Caffiene
<table>
<tr><td>
<select name="os0">
    <option class="optionVal" value="0.00">Add Caffeine</option>
    <option class="optionVal" value="3.00">Add Caffeine $3.00 USD</option>
    </select>
</td></tr>
</table>



Extra Flavor
<table>
<tr><td>
<select name="os1">
    <option class="optionVal" value="0.00">Add Extra Flavor</option>
    <option class="optionVal" value="1.00">Flavor Shot $1.00 USD</option>
    <option class="optionVal" value="3.00">Double the Flavor $2.00 USD</option>
    </select>
</td></tr>
</table>

Milk Undertone
<table>
<tr><td>
<select name="os2">
    <option class="optionVal" value="0.00">Add Milk Undertone</option>
    <option class="optionVal" value="1.00">Dairy Milk $1.00 USD</option>
    <option class="optionVal" value="1.00">Sweet Cream $1.00 USD</option>
    <option class="optionVal" value="1.00">Cheesecake $1.00 USD</option>
    </select>
</td></tr>
</table>




<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" 

alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function(){
var base_price = $('#base_price').text();
$('select').change(function(){
    var amt = $(this).val();
    final_amt = parseInt(amt)+parseInt(base_price);
    $('#final_amount').val(final_amt);
});
});


</script>

Answer 1

You can use the below code instead after some modification :

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="XXXXXXXXX">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="test">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
Base Price:<div id="base_price" value="18.00">18.00</div>

<input id="final_amount" name="amount" type="hidden" value="18">
<input type="hidden" name="weight_unit" value="lbs">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted"><br>



<table>
<tr><td><input type="hidden" name="on0" value="VG/PG Ratio">VG/PG Ratio</td></tr><tr><td><select name="os0">1
    <option value="70/30">70/30 </option>
    <option value="80/20">80/20 </option>
    <option value="90/10">90/10 </option>
</select> </td></tr>
</table>


<table>
<tr><td><input type="hidden" name="on1" value="Nicotine">Nicotine</td></tr><tr><td><select name="os1">
    <option value="0 mg">0 mg </option>
    <option value="3 mg">3 mg </option>
    <option value="6 mg">6 mg </option>
    <option value="9 mg">9 mg </option>
    <option value="12 mg">12 mg </option>
</select> </td></tr>
</table>

<input type="hidden" name="on2" value="Add Caffiene">
Add Caffiene
<table>
<tr><td>
<select name="os2" id="1">
    <option class="optionVal" value="0.00">No Caffeine</option>
    <option class="optionVal" value="3.00">Add Caffeine $3.00 USD</option>
    </select>
</td></tr>
</table>


<input type="hidden" name="on3" value="Add Extra Flavor">
Add Extra Flavor
<table>
<tr><td>
<select name="os3" id="2">
    <option class="optionVal" value="0.00">No Extra Flavor</option>
    <option class="optionVal" value="1.00">Flavor Shot $1.00 USD</option>
    <option class="optionVal" value="3.00">Double the Flavor $2.00 USD</option>
    </select>
</td></tr>
</table>

<input type="hidden" name="on4" value="Add Milk Undertone">
Add Milk Undertone
<table>
<tr><td>
<select name="os4" id="3">
    <option class="optionVal" value="0.00">No Milk Undertone</option>
    <option class="optionVal" value="1.00">Dairy Milk $1.00 USD</option>
    <option class="optionVal" value="1.00">Sweet Cream $1.00 USD</option>
    <option class="optionVal" value="1.00">Cheesecake $1.00 USD</option>
    </select>
</td></tr>
</table>




<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" 

alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function(){
var base_price = $('#base_price').text();
$("form").submit(function(){

    final_amt = parseInt(base_price)+ parseInt(document.getElementById("1").value) +parseInt(document.getElementById("2").value) +parseInt(document.getElementById("3").value) ;
    $('#final_amount').val(final_amt);
});
});


</script>