Get text content of all parent divs

Get text content of all parent divs - javascript

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>

Related

How to copy all the text content inside the div

I have a html in a given format:
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
I want to copy all the displayed text into clipboard:
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>
I have made this worked by this js function:
var div = document.querySelectorAll(".export-details")[0].textContent;
function copyDivToClipboard() {
const el = document.createElement("textarea");
el.value = div;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
}
However, it adds too many spaces between the text.
When I changed from textContent to innerText, it is working fine.
But according to this answer, ...innerText is much more performance-heavy: it requires layout information to return the result.
So, how can the text be copied to clipboard exactly similarly by using innerText.
Codepen

Try with document.createRange
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("export-area"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
}
<div class="export-details" id="export-area">
<div class="row m-0">
<div class="col-lg-6">
<h1 class="titleStyling py-2">Analytics testing-2</h1>
</div>
<div class="col-lg-6 text-right">
<i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
<i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
<ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
</ion-icon>
<ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
</ion-icon>
</div>
</div>
<!---->
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<!---->
<div>
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Recommendations</label>
</div>
<!---->
<div>
<div class="contentAlignment">
<span>
<p>testing purpose</p>
</span>
</div>
</div>
</div>
</div>
<div class="sectionSpacing">
<!---->
</div>
<div class="sectionSpacing">
<div class="sectionTitle d-flex justify-content-between align-items-center">
<label class="formLabelStyles sectionheading">Meta Information</label>
</div>
<div class="row rowSpacing">
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label>Publisher: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>ProtocolNow</span><span class="comma">, </span>
</div>
<div class="child">
<span>Other Medical Society</span><span class="comma">, </span>
</div>
<div class="child">
<span>Valley Perinatal</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label style="width: 111%;">Medical Field: </label>
</div>
<div class="displayFlex">
<!---->
<div class="child">
<span>Coronavirus - Covid 19</span><span class="comma">, </span>
</div>
<div class="child">
<span>Billing</span><span class="comma">, </span>
</div>
</div>
</div>
<!---->
<!---->
<!---->
<div class="col-md-6 section-heading metaDataStyle">
<div class="col-md-3">
<label><strong>Author: </strong></label>
</div>
<div class="displayFlex">
<div class="child">
<span>Neha KA</span><span class="comma">, </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>

when I want to copy something to the control + C I do this.
const value = document.querySelector('#id').innerText
navigator.clipboard.writeText(value)
alert(`Copied value ${value}`)

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>

How to know the selected card style and pass the value to the backend

I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>

Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.

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:

Get text of label sibling of checked checked using 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>

Develop Reference

JavaScript is the programming language of the Web.

Get text content of all parent divs - javascript

Related

How to copy all the text content inside the div

JavaScript is not working for another JavaScripted input fields

How to know the selected card style and pass the value to the backend

Combine two filters with javascript

Get text of label sibling of checked checked using javascript

Categories

Resources