Get text of label sibling of checked checked using javascript

Get text of label sibling of checked checked using javascript - javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.

$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

JavaScript is not working for another JavaScripted input fields

I am trying to auto sum input fields using JavaScript in a web page. My javascript function is partially working. However .change is triggered when it is manually changed but not if it is changed by another JavaScript function. How can I triggered it even when it is not manually change?
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="title-icon.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
input{width: 70px;text-align-last: center;}
.icon{margin-right:3%;font-size:48px;color:red; animation-name: thi;animation-iteration-count: infinite; animation-duration: 3s;}
#keyframes thi {from{color:red} to {color:white}}
</style>
</head>
<body><br>
<div style="margin:5%">
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="text-center">Section A</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="text-center">Section B</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="text-center">Grand Total</div>
</div>
</div>
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
</div>
</div><br>
</div><br>
</div>
<div class="row text-right">
<div class="col-12"><i class='icon fa fa-arrow-up'></i></div>
</div>
<div class="row text-right">
<div class="col-12">Total of 'Grand Total' is not working!</div>
</div>
<br>
</div>
</body>
<script>
$(document).ready(function()
{ // working
$('#maleA,#femaleA').change(function()
{
maleA = $('#maleA').val();
femaleA = $('#femaleA').val();
allA = Number(maleA)+Number(femaleA);
$('#totalA').val(allA);
}),
$('#maleB,#femaleB').change(function()
{
maleB = $('#maleB').val();
femaleB = $('#femaleB').val();
allB = Number(maleB)+Number(femaleB);
$('#totalB').val(allB);
}),
$('#maleA,#maleB').change(function()
{
maleA = $('#maleA').val();
maleB = $('#maleB').val();
allmale = Number(maleA)+Number(maleB);
$('#maletotal').val(allmale);
}),
$('#femaleA,#femaleB').change(function()
{
femaleA = $('#femaleA').val();
femaleB = $('#femaleB').val();
allfemale = Number(femaleA)+Number(femaleB);
$('#femaletotal').val(allfemale);
}),
//problem is here
$('#maletotal,#femaletotal').change(function()
{
allmale = $('#maletotal').val(); //feed by javascript
allfemale = $('#femaletotal').val(); //feed by javascript
alltotal = Number(allmale)+Number(allfemale);
$('#totalall').val(allA);
})
})
</script>
</html>
Kindly help me to find out the mistake or suggest a better solution.

The main issue is because setting the value of an input programmatically does not raise an event in the DOM - so your change event handler on the total fields in the last section never runs.
To correct this you can use jQuery's trigger() method to manually raise a change event on the field after setting its val().
Also, note that $('#totalall').val(allA); needs to be $('#totalall').val(alltotal); instead.
$(document).ready(function() { // working
$('#maleA,#femaleA').change(function() {
maleA = $('#maleA').val();
femaleA = $('#femaleA').val();
allA = Number(maleA) + Number(femaleA);
$('#totalA').val(allA).trigger('change');
}),
$('#maleB,#femaleB').change(function() {
maleB = $('#maleB').val();
femaleB = $('#femaleB').val();
allB = Number(maleB) + Number(femaleB);
$('#totalB').val(allB).trigger('change');
}),
$('#maleA,#maleB').change(function() {
maleA = $('#maleA').val();
maleB = $('#maleB').val();
allmale = Number(maleA) + Number(maleB);
$('#maletotal').val(allmale).trigger('change');
}),
$('#femaleA,#femaleB').change(function() {
femaleA = $('#femaleA').val();
femaleB = $('#femaleB').val();
allfemale = Number(femaleA) + Number(femaleB);
$('#femaletotal').val(allfemale).trigger('change');
}),
//problem is here
$('#maletotal,#femaletotal').change(function() {
allmale = $('#maletotal').val(); //feed by javascript
allfemale = $('#femaletotal').val(); //feed by javascript
alltotal = Number(allmale) + Number(allfemale);
$('#totalall').val(alltotal);
})
})
input {
width: 70px;
text-align-last: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="margin:5%">
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="text-center">Section A</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="text-center">Section B</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="text-center">Grand Total</div>
</div>
</div>
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleA"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaleB"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
</div>
</div><br>
</div><br>
</div>
</div>
However, you can improve the code quality and extensibility by using common classes on the elements to group them by behaviour. This makes the JS much more succinct and will work for an infinite number of 'Section' blocks. Try this:
jQuery($ => {
let $inputs = $('.input');
let $totalMale = $('#overall-male');
let $totalFemale = $('#overall-female');
let $totalOverall = $('#overall-total');
let updateRowTotal = $row => {
let maleCount = parseInt($row.find('.male').val(), 10) || 0;
let femaleCount = parseInt($row.find('.female').val(), 10) || 0;
$row.find('.total').val(maleCount + femaleCount);
}
let updateOverallTotal = () => {
let maleCount = 0;
$inputs.filter('.male').each((i, el) => maleCount += (parseInt(el.value, 10) || 0));
$totalMale.val(maleCount);
let femaleCount = 0;
$inputs.filter('.female').each((i, el) => femaleCount += (parseInt(el.value, 10) || 0));
$totalFemale.val(femaleCount);
$totalOverall.val(maleCount + femaleCount);
}
$inputs.on('input', e => {
updateRowTotal($(e.currentTarget).closest('.row'));
updateOverallTotal();
});
})
input {
width: 70px;
text-align-last: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="margin:5%">
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="text-center">Section A</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="text-center">Section B</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="text-center">Grand Total</div>
</div>
</div>
<div class="row">
<div class="col-4 border border-danger bg-primary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="input male"></div>
</div>
<div class="col-4">
<div><input type="text" class="input female"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-success">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" class="input male"></div>
</div>
<div class="col-4">
<div><input type="text" class="input female"></div>
</div>
<div class="col-4">
<div><input type="text" class="total" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-4 border border-danger bg-secondary">
<div class="row text-center">
<div class="col-4">
<div>Male</div>
</div>
<div class="col-4">
<div>Femle</div>
</div>
<div class="col-4">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-4">
<div><input type="text" id="overall-male"></div>
</div>
<div class="col-4">
<div><input type="text" id="overall-female"></div>
</div>
<div class="col-4">
<div><input type="text" id="overall-total" readonly disabled="disabled"></div>
</div>
</div><br>
</div><br>
</div>
</div>

The change event triggers only on user action. You can either use .trigger is mentioned in the above answer or invoke the final method as below,
$(document).ready(function()
{
$('#maleA,#femaleA').change(function()
{
maleA = $('#maleA').val();
femaleA = $('#femaleA').val();
allA = Number(maleA)+Number(femaleA);
$('#totalA').val(allA);
changeAllTotal();
}),
$('#maleB,#femaleB').change(function()
{
maleB = $('#maleB').val();
femaleB = $('#femaleB').val();
allB = Number(maleB)+Number(femaleB);
$('#totalB').val(allB);
changeAllTotal();
}),
$('#maleA,#maleB').change(function()
{
maleA = $('#maleA').val();
maleB = $('#maleB').val();
allmale = Number(maleA)+Number(maleB);
$('#maletotal').val(allmale);
changeAllTotal();
}),
$('#femaleA,#femaleB').change(function()
{
femaleA = $('#femaleA').val();
femaleB = $('#femaleB').val();
allfemale = Number(femaleA)+Number(femaleB);
$('#femaletotal').val(allfemale);
changeAllTotal();
})
function changeAllTotal()
{
allmale = $('#maletotal').val(); //feed by javascript
allfemale = $('#femaletotal').val(); //feed by javascript
alltotal = Number(allmale)+Number(allfemale);
$('#totalall').val(alltotal);
}
})

Admittedly, the following might appear rather condensed. But it shows that the code can be done in a much shorter way enabling it to deal with even wider tables (without the need for ids).
const Asum=DOMArr=>DOMArr.reduce((a,c)=>((a+=+c.value),a),0); // summation utility function
// find arrays of males, females and their summation fields:
const males=$(".male").get(),msum =males.pop(), females=$(".female").get(),fsum=females.pop();
// take care of all summation fields leading to grand total: gtot
let tots = $(".total").get(), gtot=tots.pop();
tots = tots.map(t=>([t,$(t).closest(".row").find("input:not([readonly])").get()]));
$(document).on("input","input",function(){
[[msum,males],[fsum,females],...tots,[gtot,[msum,fsum]]].forEach(([e,a])=>e.value=Asum(a))
})
input {
width: 40px;
text-align-last: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="margin:5%">
<div class="row">
<div class="col-3 border border-danger bg-primary">
<div class="text-center">Section A</div>
</div>
<div class="col-3 border border-danger bg-success">
<div class="text-center">Section B</div>
</div>
<div class="col-3 border border-danger bg-primary">
<div class="text-center">Section C</div>
</div>
<div class="col-3 border border-danger bg-secondary">
<div class="text-center">Grand Total</div>
</div>
</div>
<div class="row">
<div class="col-3 border border-danger bg-primary">
<div class="row text-center">
<div class="col-3">
<div>Male</div>
</div>
<div class="col-3">
<div>Femle</div>
</div>
<div class="col-3">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-3">
<div><input type="text" class="male" id="maleA"></div>
</div>
<div class="col-3">
<div><input type="text" class="female" id="femaleA"></div>
</div>
<div class="col-3">
<div><input type="text" class="total" id="totalA" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-3 border border-danger bg-success">
<div class="row text-center">
<div class="col-3">
<div>Male</div>
</div>
<div class="col-3">
<div>Femle</div>
</div>
<div class="col-3">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-3">
<div><input type="text" class="male" id="maleB"></div>
</div>
<div class="col-3">
<div><input type="text" class="female" id="femaleB"></div>
</div>
<div class="col-3">
<div><input type="text" class="total" id="totalB" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-3 border border-danger bg-primary">
<div class="row text-center">
<div class="col-3">
<div>Male</div>
</div>
<div class="col-3">
<div>Femle</div>
</div>
<div class="col-3">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-3">
<div><input type="text" class="male"></div>
</div>
<div class="col-3">
<div><input type="text" class="female"></div>
</div>
<div class="col-3">
<div><input type="text" class="total" readonly disabled="disabled"></div>
</div>
</div>
</div>
<div class="col-3 border border-danger bg-secondary">
<div class="row text-center">
<div class="col-3">
<div>Male</div>
</div>
<div class="col-3">
<div>Femle</div>
</div>
<div class="col-3">
<div>Total</div>
</div>
</div>
<div class="row text-center">
<div class="col-3">
<div><input type="text" class="male" id="maletotal" readonly disabled="disabled"></div>
</div>
<div class="col-3">
<div><input type="text" class="female" id="femaletotal" readonly disabled="disabled"></div>
</div>
<div class="col-3">
<div><input type="text" class="total" id="totalall" readonly disabled="disabled"></div>
</div>
</div><br>
</div><br>
</div>
</div>

Combine two filters with javascript

Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:

I lose draggable functionality when I binding items in HTML

I have fullCalendar like this:
And I would like to load stores (DALIA GLAMOUR; DALIA 15...) when I change select. But if I write stores in HTML like this:
<div id='row'>
<div id='external-events'>
<div id='external-events-listing'>
<div class="form-group col-sm-2 fc-event" style="background-color:#1abc9c;">
PTO. CARMEN
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#d35400;">
DALIA GLAMOUR
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#9b59b6;">
DALIA 15
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#34495e;">
DALIA 5
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#3498db;">
SABINA CASINO
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#95a5a6;">
SASHA LIMONES
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#f39c12;">
SAM P.BLANCA
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#f1c40f;">
SAM DEILAND
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#e74c3c;">
BAJA
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#27ae60;">
VACACIONES
</div>
</div>
<p>
<input type='checkbox' id='drop-remove' checked='checked' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
It works. But now, I have an ajax y load store like this:
<div id='row'>
<div id='external-events'>
<div id='external-events-listing' >
<div class="form-group col-sm-2 fc-event" ng-repeat="store in vm.stores | orderBy:'store.id' " id="{{store.id}}" style="background-color:{{store.color}}; text-transform: uppercase;">
{{store.name}}
</div>
</div>
<p>
<input type='checkbox' id='drop-remove' checked='checked' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
I have this ajax in my javascript:
ajax.sendApiRequest({zone: vm.store.touristArea}, "GET", "store").then(
function(response) {
vm.stores = response.data.concat(constants.STORE_EVENTS);
console.log("vm.stores", vm.stores)
},
(function(error) {
})
);
But it doesn't work. I saw in inspector, that in first case (without ajax), div with fc-event class, has "ui-draggable ui-draggable-handle" class, but in the second case, not. Any idea?

The JS file is not working as i want it to after copying it in to the HTML file. below is the code along with the code in my js file

Below is the HTML file where I've linked the file news.js.
The click methods which I've written aren't working.
<!doctype html>
<html>
<title>NEWS</title>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW business aviation</p>
</div>
<div class="col-xs-6">
<p class="title">Flying the Gulfstream G650</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Flying the Gulfstream G650</h1>
<p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">New retirements cut RAF VC10 fleet to four</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>New retirements cut RAF VC10 fleet to four</h1>
<p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Jul 17</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
<p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Defense</p>
</div>
<div class="col-xs-6">
<p class="title">Freedom Experiences Two More Power Outages</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Freedom Experiences Two More Power Outages</h1>
<p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">FedEx to acquire up to 30 United 757s</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>FedEx to acquire up to 30 United 757s</h1>
<p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<script src="news.js"></script>
</body>
</html>
news.js file
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('.current);
$(this).children('.description').show();
$(document).keypress(function(event){
if(event.which === 111);{
$('.current).children('.description').toggle();
}
});
});
}
$(document).ready(main);

There are a few issues, first main is a function so add parenthesis after it. Your js has missing quotes:
Here...................................v (also you don't need the period when adding a class)
$(this).addClass('.current);
and here....v
$('.current).children('.description').toggle();

if i understood it well this may help you:
/*global alert,jQuery*/
(function ($, window, document) {
'use strict';
$(function () {
var $articles = $("div.article");
$articles.on('click', function () {
var $me = $(this);
if (!$me.hasClass('current')) {
$('div.article.current').removeClass('current');
$me.addClass('current');
}
});
});
}(jQuery, window, document));
and with css:
div.article div.description {
display: none;
}
div.article.current div.description {
display: block;
}
no need to do toggle visibility of div.description element using javascript.

Develop Reference

JavaScript is the programming language of the Web.

Get text of label sibling of checked checked using javascript - javascript

Related

Get text content of all parent divs

JavaScript is not working for another JavaScripted input fields

Combine two filters with javascript

I lose draggable functionality when I binding items in HTML

The JS file is not working as i want it to after copying it in to the HTML file. below is the code along with the code in my js file

Categories

Resources