Can someone tell me why all of a sudden some of my hidden inputs are not posting when I select a "No" option from one of 3 radio buttons on my checkout table?
http://jsfiddle.net/#&togetherjs=O6ViKmJQRB
Heres my table...
<table class="shop_table">
<thead>
<tr>
<th class="product-name">Product</th>
<th class="product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-name">
<strong>Demo Vacation Home</strong><br /><br />1 adults, 0 children<br />2014-11-21 to 2014-11-23 <strong class="product-quantity">× 1</strong> </td>
<td class="product-total totalTextTop">
<span class="amount">$1,000.00</span> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Refundable Damage Deposit <span style="color: #ff0000;">(not taxed, not included in order total)</span>
<br/><span style="color: #ff0000; font-size: 10px;">Please note that the Refundable Damage Deposit must be paid within 45 days of your reserved vacation check-in date.<br/>For international creditcard transactions there is an additional 6% surcharge.</span>
</td>
<td class="product-total refundableDamageDepositTextTop">
$<div id="priceDisplayRefundableDamageDeposit" class="priceDisplay">2,000.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Cleaning Fee
</td>
<td class="product-total">
$<div id="priceDisplayCleaningFee" class="priceDisplay">175.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
City Occupancy Tax 8%
</td>
<td class="product-total">
$<div id="priceDisplayTaxRate" class="priceDisplay">80.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Preheat Pool? <input type="radio" name="preheatPoolSelect" id="preheatPoolYes" value="yes" onclick='showFee("priceDisplayPoolHeating","200.00","poolHeatingFee")' checked><label for="preheatPoolYes">Yes</label> <input type="radio" name="preheatPoolSelect" id="preheatPoolNo" value="no" onclick='clearFee("priceDisplayPoolHeating","poolHeatingFee")'><label for="preheatPoolNo">No</label>
</td>
<td class="product-total">
$<div id="priceDisplayPoolHeating" class="priceDisplay">200.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Have Pet(s)? <input type="radio" name="havePetsSelect" id="havePetsYes" value="yes" onclick='showFee("priceDisplayPetFee","150.00","petFee")' checked><label for="havePetsYes">Yes</label> <input type="radio" name="havePetsSelect" id="havePetsNo" value="no" onclick='clearFee("priceDisplayPetFee","petFee")'><label for="havePetsNo">No</label>
</td>
<td class="product-total">
$<div id="priceDisplayPetFee" class="priceDisplay">150.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Property Damage Protection? <input type="radio" name="propertyDamageProtectionSelect" id="propertyDamageProtectionYes" value="yes" onclick='showFee("priceDisplayPropertyDamageProtection","80.00","propertyDamageProtection")' checked><label for="propertyDamageProtectionYes">Yes</label> <input type="radio" name="propertyDamageProtectionSelect" id="propertyDamageProtectionNo" value="no" onclick='clearFee("priceDisplayPropertyDamageProtection","propertyDamageProtection")'><label for="propertyDamageProtectionNo">No</label>
</td>
<td class="product-total">
$<div id="priceDisplayPropertyDamageProtection" class="priceDisplay">80.00</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
Reservation Fee 6%
</td>
<td class="product-total">
$<div id="priceDisplayReservationFee" class="priceDisplay">101.10</div> </td>
</tr>
<tr class="cart_item">
<td class="product-name">
<strong>Vacation Package Total</strong>
</td>
<td class="product-total">
<strong>$<div id="priceDisplayVacationPackageTotal" class="priceDisplay">1,786.10</div></strong>
</td>
</tr>
<!--
<tr class="cart_item">
<td class="product-name">
<span style="line-height:15px;"> </span>
</td>
<td class="product-total">
</td>
</tr>
-->
</tbody>
<tfoot>
<!--
<tr class="cart-subtotal">
<th>Cart Subtotal</th>
<td>$1,356.10</td>
</tr>
-->
<tr class="order-total">
<th>Order Total</th>
<td>$<div id="priceDisplayVacationPackageGrandTotal" class="priceDisplay">1,786.10</div></td>
</tr>
</tfoot>
</table>
Heres the form with the hidden inputs...
<form id='paypalCheckout' action='https://www.paypal.com/cgi-bin/webscr' method='post' style="margin-bottom: 10px">
<input type="hidden" name="item_name_1" value="Demo Vacation Home" />
<input type="hidden" name="item_number_1" value="Demo-Vacation-Home" />
<input type="hidden" name="amount_1" value="1000" />
<input type="hidden" name="quantity_1" value="1" />
<!---
<input type="hidden" name="item_name_" value="Refundable Damage Deposit" />
<input type="hidden" name="item_number_" value="" />
<input type="hidden" name="amount_" value="" />
<input type="hidden" name="quantity_" value="1" />
-->
<input type="hidden" name="item_name_2" value="Cleaning Fee" />
<input type="hidden" name="item_number_2" value="Cleaning-Fee" />
<input type="hidden" name="amount_2" value="175" />
<input type="hidden" name="quantity_2" value="1" />
<input type="hidden" name="item_name_3" value="6% Reservation Fee" />
<input type="hidden" name="item_number_3" value="6%-Reservation-Fee" />
<input type="hidden" name="amount_3" value="101.1" id="reservationFee"/>
<input type="hidden" name="quantity_3" value="1" />
<input type="hidden" name="item_name_4" value="8% City Occupancy Tax" />
<input type="hidden" name="item_number_4" value="8%-City-Occupancy-Tax" />
<input type="hidden" name="amount_4" value="80" />
<input type="hidden" name="quantity_4" value="1" />
<input type="hidden" name="item_name_5" value="Pool-heating Fee" class="poolHeatingFee"/>
<input type="hidden" name="item_number_5" value="Pool-heating-Fee" class="poolHeatingFee"/>
<input type="hidden" name="amount_5" value="200" class="poolHeatingFee"/>
<input type="hidden" name="quantity_5" value="1" class="poolHeatingFee"/>
<input type="hidden" name="item_name_6" value="Pet Fee" class="petFee"/>
<input type="hidden" name="item_number_6" value="Pet-Fee" class="petFee"/>
<input type="hidden" name="amount_6" value="150" class="petFee"/>
<input type="hidden" name="quantity_6" value="1" class="petFee"/>
<input type="hidden" name="item_name_7" value="Property Damage Protection" class="propertyDamageProtection"/>
<input type="hidden" name="item_number_7" value="Property-Damage-Protection" class="propertyDamageProtection"/>
<input type="hidden" name="amount_7" value="80" class="propertyDamageProtection"/>
<input type="hidden" name="quantity_7" value="1" class="propertyDamageProtection"/>
<input type='hidden' name='business' value='juliocpreciado@gmail.com' />
<input type='hidden' name='shopping_url' value='http://www.dreamhomevacationrentals.com/cart/' />
<input type='hidden' name='lc' value='en_US' />
<input type='hidden' name='cmd' value='_cart' />
<input type='hidden' name='charset' value='utf-8'>
<input type='hidden' name='upload' value='1' />
<input type='hidden' name='no_shipping' value='2' />
<input type='hidden' name='currency_code' value='USD' id='currency_code' />
<input type='hidden' name='custom' value='|||' />
<input type='hidden' name='notify_url' value='http://www.dreamhomevacationrentals.com/store/ipn/'>
<input type='hidden' name='return' value='http://www.dreamhomevacationrentals.com/thank-you/' />
<input id='PayPalCheckoutButton' type='image' src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' value='Checkout With PayPal' />
</form>
And here's the javascript below that is the form...
<script type="text/javascript">
//money formatter from... http://stackoverflow.com/questions/9318674/javascript-number-currency-formatting
Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) {
var n = this,
decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
decSeparator = decSeparator == undefined ? "." : decSeparator,
thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
sign = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};
function recalculateReservationFee() {
var vacationRentalPrice = parseFloat(1000);
var TaxRate = parseFloat(document.getElementById("priceDisplayTaxRate").textContent);
var CleaningFee = parseFloat(document.getElementById("priceDisplayCleaningFee").textContent);
var PoolHeating = parseFloat(document.getElementById("priceDisplayPoolHeating").textContent);
var PetFee = parseFloat(document.getElementById("priceDisplayPetFee").textContent);
var PropertyDamageProtection = parseFloat(document.getElementById("priceDisplayPropertyDamageProtection").textContent);
var reservationFeeTarget = vacationRentalPrice + TaxRate + CleaningFee + PoolHeating + PetFee + PropertyDamageProtection;
var theNewReservationFee = parseFloat((6 * reservationFeeTarget) / 100);
var formattedNewReservationFee = theNewReservationFee.formatMoney(2,',','.'); // example "$3,543.76"
document.getElementById("priceDisplayReservationFee").innerHTML = formattedNewReservationFee;
document.getElementById("reservationFee").value = formattedNewReservationFee;
//document.write('<br/>The Vars: <br/>' + vacationRentalPrice + '<br/>' + CleaningFee + '<br/>' + TaxRate + '<br/>' + PoolHeating + '<br/>' + PetFee + '<br/>' + PropertyDamageProtection + '<br/>--<br/>' + reservationFeeTarget + '<br/>' + formattedNewReservationFee);
function recalculateGrandTotal() {
var theGrandTotal = vacationRentalPrice + TaxRate + CleaningFee + PoolHeating + PetFee + PropertyDamageProtection + theNewReservationFee;
var formattedGrandTotal = theGrandTotal.formatMoney(2,',','.'); // example "$3,543.76"
document.getElementById("priceDisplayVacationPackageTotal").innerHTML = formattedGrandTotal;
document.getElementById("priceDisplayVacationPackageGrandTotal").innerHTML = formattedGrandTotal;
}
recalculateGrandTotal();
}
function clearFee(theNamedFee,theNamedClass){
document.getElementById(theNamedFee).innerHTML = '0.00';
var elems = document.getElementsByClassName(theNamedClass);
for(var i = 0; i < elems.length; i++) {
elems[i].disabled = true;
}
recalculateReservationFee();
}
function showFee(theNamedFee,someFee,theNamedClass){
document.getElementById(theNamedFee).innerHTML = someFee;
var elems = document.getElementsByClassName(theNamedClass);
for(var i = 0; i < elems.length; i++) {
elems[i].disabled = false;
}
recalculateReservationFee();
}
</script>
