Barry Corrigan
Reputation: 95
jQuery adding two totals together
I have a basic form where customers can select a range of tickets via Checkboxes and Select Boxes. Then it generates a sub total.
I am just looking to how I can add these two sub totals together.
My HTML is
<form id="calx-south-green">
<fieldset id="adults">
<legend>Additional Adults - <span class="red">£228</span></legend>
<div>
<label for="1">1</label>
<input type="checkbox" id="1" value="228" />
</div>
<div>
<label for="2">2</label>
<input type="checkbox" id="2" value="228" />
</div>
<div>
<label for="3">3</label>
<input type="checkbox" id="3" value="228" />
</div>
<div>
<label for="4">4</label>
<input type="checkbox" id="4" value="228" />
</div>
<div>
<label for="5">5</label>
<input type="checkbox" id="5" value="228" />
</div>
<div>
<select name="proc" id="proc">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="text" name="Adult Sub Total" id="adults_total" />
</fieldset>
<fieldset id="young">
<legend>Young Adults 16-21 - <span class="red">£146</span></legend>
<div>
<label for="1">1</label>
<input type="checkbox" id="1" value="146" />
</div>
<div>
<label for="2">2</label>
<input type="checkbox" id="2" value="146" />
</div>
<div>
<label for="3">3</label>
<input type="checkbox" id="3" value="146" />
</div>
<div>
<label for="4">4</label>
<input type="checkbox" id="4" value="146" />
</div>
<div>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<input type="text" name="Young Sub Total" id="young_total" />
</fieldset>
<div>
<label for="base_fee">Base Fee</label>
<input type="text" name="base_fee" id="base_fee" value="228" />
</div>
<div>
<p class="result">RESULT HERE</p>
</div>
</form>
My Code is:
var total_adults = $("#adults_total");
var checkBox_adults = $("#adults input[type='checkbox']");
var _select_adults = $("#adults select");
checkBox_adults.click(function(){
checkBox_adults.prop("checked", false);
var _index = $(this).attr("id");
total_adults.val(_index * 228);
_select_adults.val(_index);
checkBox_adults.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select_adults.change(function() {
checkBox_adults.prop("checked", false);
var _val = $(this).val();
total_adults.val(_val * 228);
checkBox_adults.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
var total_young = $("#young input[name='Young Sub Total']");
var checkBox_young = $("#young input[type='checkbox']");
var _select_young = $("#young select");
checkBox_young.click(function(){
checkBox_young.prop("checked", false);
var _index = $(this).attr("id")
total_young.val(_index * 146);
_select_young.val(_index);
checkBox_young.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select_young.change(function() {
checkBox_young.prop("checked", false);
var _val = $(this).val();
total_young.val(_val * 146);
checkBox_young.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
For adding in jQuery I tried doing this but its not working
var num1 = $("#adults_total").val(),
num2 = $("#young_total").val(),
result = parseInt(num1, 10) + parseInt(num2, 10);
$(".result").text(result);
I also have a fiddle demo here - http://jsfiddle.net/barrycorrigan/L2as6143/1/
Upvotes: 0
Views: 79
Answers (3)
Sumeet Patil
Reputation: 432
Try this - >
var total_adults = $("#adults_total");
var checkBox_adults = $("#adults input[type='checkbox']");
var _select_adults = $("#adults select");
checkBox_adults.click(function(){
checkBox_adults.prop("checked", false);
var _index = $(this).attr("id");
total_adults.val(_index * 228);
_select_adults.val(_index);
checkBox_adults.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select_adults.change(function() {
checkBox_adults.prop("checked", false);
var _val = $(this).val();
total_adults.val(_val * 228);
checkBox_adults.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
var total_young = $("#young input[name='Young Sub Total']");
var checkBox_young = $("#young input[type='checkbox']");
var _select_young = $("#young select");
checkBox_young.click(function(){
checkBox_young.prop("checked", false);
var _index = $(this).attr("id")
total_young.val(_index * 146);
_select_young.val(_index);
checkBox_young.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select_young.change(function() {
checkBox_young.prop("checked", false);
var _val = $(this).val();
total_young.val(_val * 146);
checkBox_young.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
$('input[type="checkbox"], select').click(function() {
var num1 = $("#adults_total").val();
var num2 = $("#young_total").val();
console.log(num1 + " " + num2);
var result = Number(num1) + Number(num2);
$(".result").text(result);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="calx-south-green">
<fieldset id="adults">
<legend>Additional Adults - <span class="red">£228</span></legend>
<div>
<label for="1">1</label>
<input type="checkbox" id="1" value="228" />
</div>
<div>
<label for="2">2</label>
<input type="checkbox" id="2" value="228" />
</div>
<div>
<label for="3">3</label>
<input type="checkbox" id="3" value="228" />
</div>
<div>
<label for="4">4</label>
<input type="checkbox" id="4" value="228" />
</div>
<div>
<label for="5">5</label>
<input type="checkbox" id="5" value="228" />
</div>
<div>
<select name="proc" id="proc">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="text" name="Adult Sub Total" id="adults_total" />
</fieldset>
<fieldset id="young">
<legend>Young Adults 16-21 - <span class="red">£146</span></legend>
<div>
<label for="1">1</label>
<input type="checkbox" id="1" value="146" />
</div>
<div>
<label for="2">2</label>
<input type="checkbox" id="2" value="146" />
</div>
<div>
<label for="3">3</label>
<input type="checkbox" id="3" value="146" />
</div>
<div>
<label for="4">4</label>
<input type="checkbox" id="4" value="146" />
</div>
<div>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<input type="text" name="Young Sub Total" id="young_total" />
</fieldset>
<div>
<label for="base_fee">Base Fee</label>
<input type="text" name="base_fee" id="base_fee" value="228" />
</div>
<div>
<p class="result">RESULT HERE</p>
</div>
</form>Upvotes: 0
Amit
Reputation: 15387
Use as
var total_adults = $("#adults_total");
var checkBox_adults = $("#adults input[type='checkbox']");
var _select_adults = $("#adults select");
checkBox_adults.click(function(){
checkBox_adults.prop("checked", false);
var _index = $(this).attr("id");
total_adults.val(_index * 228);
_select_adults.val(_index);
checkBox_adults.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
});
_select_adults.change(function() {
checkBox_adults.prop("checked", false);
var _val = $(this).val();
total_adults.val(_val * 228);
checkBox_adults.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
});
var total_young = $("#young input[name='Young Sub Total']");
var checkBox_young = $("#young input[type='checkbox']");
var _select_young = $("#young select");
checkBox_young.click(function(){
checkBox_young.prop("checked", false);
var _index = $(this).attr("id")
total_young.val(_index * 146);
_select_young.val(_index);
checkBox_young.each(function(){
if (_index > 0) {
$(this).prop("checked", true);
_index--;
}
});
Total();
});
_select_young.change(function() {
checkBox_young.prop("checked", false);
var _val = $(this).val();
total_young.val(_val * 146);
checkBox_young.each(function() {
if (_val > 0) {
$(this).prop("checked", true);
_val--;
}
});
Total();
});
function Total(){
var num1 = $("#adults_total").val(),
num2 = $("#young_total").val(),
result = parseInt(num1, 10) + parseInt(num2, 10);
$(".result").text(result);
}
Previously missed function calling on first check box changes.
Upvotes: 1
Martin Denk
Reputation: 554
You could try something like $("#adults :checked").length + $("#young :checked").length. This counts and adds the number of checked checkboxes in each fieldset.
Upvotes: 0