I have the following code :
$(document).ready(function(){
$('input').iCheck ({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
var sum = 0;
$(".btn-checkbox-choice").blur(function(){
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00", locale:"us"});
});
$(".btn-checkbox-plan").blur(function(){
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00",locale:"us"});
});
$('input').on('ifChecked', function(event){
if($(".btn-checkbox-plan").is(':checked')){
$("#output").html($(this).val());
}
else if($(".btn-checkbox-choice").is(':checked')){
$("#output-choice").html($(this).val());
}
});
if($('.btn-checkbox-choice').is(':checked') && $('.btn-checkbox-plan').is(':checked')){
sum = parseInt($('.btn-checkbox-choice').val()) + parseInt($('.btn-checkbox-plan').val());
//alert(sum);
$('#output').html(sum);
//console.log(sum);
}
});
checkout.php
<div class="answer">
<input class="btn-checkbox-choice" type="radio" name="groupeight" value="49.99" <?php if (!isset($_POST['radio']) || isset($_POST['radio']) && $_POST['radio'] == '49.99'): ?>checked="checked"<?php endif; ?> /><label>Yes</label></div>
<input class="btn-checkbox-choice" type="radio" name="groupeight" value="0.00" <?php if (!isset($_POST['radio']) || isset($_POST['radio']) && $_POST['radio'] == '0.00'): ?>checked="checked"<?php endif; ?> /><label>No</label><br />
<label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="699" <?php if (!isset($_POST['radio']) || isset($_POST['radio']) && $_POST['radio'] == '699'): ?>checked="checked"<?php endif; ?> /><label>Silver Plan</label><span id="silver-plan-price">$699</span></label>
<label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="999" <?php if (isset($_POST['radio']) && $_POST['radio'] == '999'): ?>checked="checked"<?php endif; ?>/><label>Gold Plan</label><span id="gold-plan-price">$999</span></label>
I am trying to output the total price of the .btn-checkbox-plan and .btn-choice-plan with $ sign in front of the total amount. However, my code doesn't work. I don't get the total sum of the .btn-checkbox-plan and .btn-choice-plan; however, radio buttons work individually. If I click .btn-checkbox-choice, than I get 49.99 if user selects "Yes", or 0.00 if user selects "No". Then if I click .btn-checkbox-plan, it gets overwritten with either 699 or 999 depending if I clicked Silver or Gold plan. What am I doing wrong? How can I get a total sum of those integers with the $ in front of them?
For the $ sign I have used the following source https://code.google.com/p/jquery-numberformatter/
Once you have your properly formatted price, simply add a '$' to your sum variable with string concatenation.
sum = "$" + sum;
$('#output').html(sum);