Angularjs / HTML Show and Hide li elements onClick - javascript

I am having a problem with the appearance of the "Categories" and their subordinate lists.
The lists should not be displayed when loading the page. So only be visible by a click of the user. Unfortunately, these list items disappear immediately as soon as a checkbox is selected. That should not happen. The content under "Categories" should only disappear or be made visible when the word Categories is clicked.
What changes do I have to make to make this work as I imagine?
Here's the HTML of the container it's about:
<div class="cd-filter-block" value="Show Hide Elements" data-ng-click="ShowHideCategory()" >
<h4 >Kategorien</h4>
<ul class="cd-filter-content cd-filters list" ng-show="IsVisibleCategory">
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Rind" data-ng-false-value="">
<label class="checkbox-label"> Rind </label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Geflügel" data-ng-false-value="">
<label class="checkbox-label">Geflügel</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schwein" data-ng-false-value="">
<label class="checkbox-label">Schwein</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schaf" data-ng-false-value="">
<label class="checkbox-label">Schaf</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Wild" data-ng-false-value="">
<label class="checkbox-label">Wild</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Ziege" data-ng-false-value="">
<label class="checkbox-label">Ziege</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Pferd" data-ng-false-value="">
<label class="checkbox-label">Pferd</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Alpaka" data-ng-false-value="">
<label class="checkbox-label">Alpaka</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Fisch" data-ng-false-value="">
<label class="checkbox-label">Fisch</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Kaninchen" data-ng-false-value="">
<label class="checkbox-label">Kaninchen</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Mineral" data-ng-false-value="">
<label class="checkbox-label">Mineralfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Einzel" data-ng-false-value="">
<label class="checkbox-label">Einzelfutter</label>
</li>
<li>
<input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Spezial" data-ng-false-value="">
<label class="checkbox-label">Spezialfutter</label>
</li>
<li class="reset">
<p><strong><i class="fa fa-undo" aria-hidden="true"></i> Filter zurücksetzen</strong></p>
</li>
</ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->
And here are the excerpts from the script file:
app.controller('PageCtrl', ['$scope', 'filterFilter', '$http', function ($scope, filterFilter, $http) {
$scope.items =[];
$http.get("document.json").success(function(response){
$scope.items = response; //ajax request to fetch data into $scope.data
// pagination controls
$scope.currentPage = 1;
$scope.totalItems = $scope.items.length;
$scope.entryLimit = 200; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.orderByField = 'evaluation_result';
$scope.reverseSort = true;
$scope.IsVisibleCategory = false;
&scope.IsVisibleSubCategory = false;
&scope.IsVisibleComposition = false;
&scope.IsVisibleAnteile = false;
$scope.ShowHideCategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleCategory = $scope.IsVisibleCategory ? false : true;
};
$scope.ShowHideSubcategory = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleSubcategory = $scope.IsVisibleSubcategory ? false : true;
};
$scope.ShowHideComposition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleComposition = $scope.IsVisibleComposition ? false : true;
};
$scope.ShowHideAnteile = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisibleAnteile = $scope.IsVisibleAnteile ? false : true;
};
});

The problem here is, that you set the ng-click on the containing div. So every click on a child, will trigger the ShowHideCategory() function.
Try moving the click handler to the actual word:
<div class="cd-filter-block" value="Show Hide Elements">
<h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
[...]
Side note, not related to your question
In your ShowHide function, you could optimise your code a bit:
$scope.IsVisibleCategory = !$scope.IsVisibleCategory;

Related

How to get text of label of checked with html tag?

How do I get each text of label of input:checked with <span>?
I tried to use "<span>" + $(this).next().find('span').text() + "</span>";
It was not working.
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function(){
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
You code is basically working except you needed a change event added.
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function() {
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});
Demo
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function() {
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>
<div id="detail_cate_output"></div>
You just need onchange Event.
First you need to capture changes check/uncheck of checkbox. and then you can loop through it.
$("input[type='checkbox'][name='chk_datail_category']").change(function() {
var values = "";
$("input[type='checkbox'][name='chk_datail_category']:checked").each(function(){
values += $(this).next().find('span').text(); //I wanna get this with <span>
});
$("#detail_cate_output").html(values);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="check_cst">
<input type="checkbox" id="detail_cate01" name="chk_datail_category" value="">
<label for="detail_cate01" class="flex_btw items_cnt"><span>cate1</span><b class="flex_cnt items_cnt"></b></label>
</li>
<li class="check_cst">
<input type="checkbox" id="detail_cate02" name="chk_datail_category" value="">
<label for="detail_cate02" class="flex_btw items_cnt"><span>cate2</span><b class="flex_cnt items_cnt"></b></label>
</li>
</ul>
<div id="detail_cate_output"></div>

jQuery each loop give only first result

I am trying to generate an array to be submitted to an ajax call via jQuery. Here is my HTML and JavaScript:
//Following is the JavaScript I use to generate the variables from checked checkboxes
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
var tutearray = {};
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
});
tutelists.push(tutearray);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>
The result I receive is as follows (I have checked the first 3 boxes in each list);
{"id":"opt3062581","issuedtutes1":["1","2","3"],
"issuedtutes2":["1","2","3"],
"issuedtutes3":["1","2","3"]}
However the desired result is as follows;
{"id":"opt471821","issuedtutes":["1","2","3"]},
{"id":"opt1215754","issuedtutes":["1","2","3"]},
{"id":"opt3062581","issuedtutes":["1","2","3"]}
Couldn't figure out what am I missing. When i remove the id part from the function, this returns {"id":"opt3062581","issuedtutes":["1","2","3"]} which is the data from the last list. Please help.
Number of tute lists is dynamic and not fixed.
Your expected output looks like a list of objects, so tutelists should be a list not an object.
jQuery(document).on("click", ".refno", function() {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists = [];
jQuery('.datarefindex_' + refindex).each(function() {
var subjid = jQuery(this).data("subjid");
i++;
var tutearray = {};
tutearray["id"] = subjid;
tutearray["issuedtutes"] = jQuery("input[name=tuteset_" + refindex + "_" + subjid + "]:checked").map(function() {
return this.value;
}).get();
tutelists.push(tutearray);
});
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1105898
<ul>
<li>
<div>Title 1</div>
<ul class="datarefindex_1" data-subjid="opt471821">
<li>
<label class="tutebtn" for="1_opt471821_1">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_1" data-subj="opt471821" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt471821_2">
<input name="tuteset_1_opt471821" data-mainrefindex="1" type="checkbox" id="1_opt471821_2" data-subj="opt471821" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 2</div>
<ul class="datarefindex_1" data-subjid="opt1215754">
<li>
<label class="tutebtn" for="1_opt1215754_1">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_1" data-subj="opt1215754" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt1215754_2">
<input name="tuteset_1_opt1215754" data-mainrefindex="1" type="checkbox" id="1_opt1215754_2" data-subj="opt1215754" value="2"> 2</label>
</li>
</ul>
</li>
<li>
<div>Title 3</div>
<ul class="datarefindex_1" data-subjid="opt3062581">
<li>
<label class="tutebtn" for="1_opt3062581_1">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_1" data-subj="opt3062581" value="1"> 1</label>
</li>
<li>
<label class="tutebtn" for="1_opt3062581_2">
<input name="tuteset_1_opt3062581" data-mainrefindex="1" type="checkbox" id="1_opt3062581_2" data-subj="opt3062581" value="2"> 2</label>
</li>
</ul>
</li>
</ul>
<div id="responsecontainer"></div
>
Your id value will be replaced with new newer one. Please try to use push() method of array to make it workable.
jQuery(document).on("click", ".refno", function () {
var ref = jQuery(this).data("ref");
var refindex = jQuery(this).data("refindex");
var i = 0;
var tutelists =[];
tutelistElement = {};
jQuery('.datarefindex_'+ refindex ).each(function(){
var subjid = jQuery(this).data("subjid");
i++;
tutelistElement["id"] = subjid;
tutelistElement["issuedtutes"+i] = jQuery("input[name=tuteset_"+refindex+"_"+subjid+"]:checked").map(function () { return this.value; }).get();
});
tutelists.push(tutelistElement);
var tutelists = JSON.stringify(tutelists);
jQuery("#responsecontainer").html(tutelists);
});

Get to the child element of input tag

I am trying to get to <label> tag right under the <input> tag for later styling purposes. I tried with .firstElementChild, which gives me a null value. How can I get to label tag of clicked checkbox field? This is my code:
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.firstElementChild);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
It seems like you quite don't know what child elements and siblings are.
Consider the following for children:
<div id="parent">
<div id="child">I'm the child of my parent.</div>
</div>
And the following for siblings:
<div id="sibling1"></div>
<div id="sibling2">I'm the sibling of sibling1.</div>
In your code, those labels are siblings of your input elements.
So in your script, change console.log(targetCb.firstElementChild); to console.log(targetCb.nextElementSibling);
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.nextElementSibling);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
Change
var targetCb = e.target;
to var targetCb = e.target.nextElementSibling;

Jquery - Enable/disable multiple checkboxes in multiple lists

I have three lists in my page (ul.list1, ul.list2, ul.list3) and each li of every list has checkboxes. From the beginning I want to have all checkboxes disabled except from the ones in .list1.
The thought is that I have to select THREE .list1-checkboxes, then only ONE in .list2 and then AUTOCHECK the .list3-checkbox.
To be more specific if I click three .list1-checkboxes I want to disable the rest of the .list1-checkboxes and enable .list2-checkboxes. But if I uncheck one of the .list1-checkboxes I want to enable the rest .list1-checkboxes again and disable .list2-checkboxes whether I had already clicked on them or not.
Now if I select one .list2-checkbox I want the rest of the .list2-checkboxes to be disabled and in .list3 enable and autocheck the only one checkbox there is. If I uncheck the .list2-checkbox I want the the .list2-checkboxes to be enabled again and .list3-checkbox to be unchecked and disabled.
The HTML is something like that:
<div>
<ul class="list1">
<li><input type="checkbox" /><label>list1-item1</label></li>
<li><input type="checkbox" /><label>list1-item2</label></li>
<li><input type="checkbox" /><label>list1-item3</label></li>
<li><input type="checkbox" /><label>list1-item4</label></li>
<li><input type="checkbox" /><label>list1-item5</label></li>
</ul>
</div>
<div>
<ul class="list2">
<li><input type="checkbox" /><label>list2-item1</label></li>
<li><input type="checkbox" /><label>list2-item2</label></li>
<li><input type="checkbox" /><label>list2-item3</label></li>
<li><input type="checkbox" /><label>list2-item4</label></li>
<li><input type="checkbox" /><label>list2-item5</label></li>
<li><input type="checkbox" /><label>list2-item6</label></li>
<li><input type="checkbox" /><label>list2-item7</label></li>
<li><input type="checkbox" /><label>list2-item8</label></li>
</ul>
<div>
</div>
<ul class="list3">
<li><input type="checkbox" /><label>list3-item1</label></li>
</ul>
</div>
Your requirements can be acheived through event handlers. You can find a list of events in this page : HTML DOM Events. And if you want to use jQuery to attach event handlers, you can read on() | jQuery API.
// Code goes here
$(function() {
var list1 = $('.list1 > li > input[type="checkbox"]');
var list2 = $('.list2 > li > input[type="checkbox"]');
var list3 = $('.list3 > li > input[type="checkbox"]');
list1.on('change', function(event) {
var numList1 = $(list1).filter(':checked').length;
if(numList1 >= 3) {
$(list1).filter(':not(:checked)').prop('disabled', true);
$(list2).prop('disabled', false);
} else {
$(list1).prop('disabled', false);
$(list2).prop('checked', false).prop('disabled', true);
$(list3).prop('checked', false).prop('disabled', true);
}
});
list2.on('change', function(event) {
var numList2 = $(list2).filter(':checked').length;
if(numList2 >=1) {
$(list2).filter(':not(:checked)').prop('disabled', true);
$(list3).prop('checked', true).prop('disabled', false);
}
else {
$(list2).prop('disabled', false);
$(list3).prop('checked', false).prop('disabled', true);
}
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<ul class="list1">
<li>
<input type="checkbox" />
<label>list1-item1</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item2</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item3</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item4</label>
</li>
<li>
<input type="checkbox" />
<label>list1-item5</label>
</li>
</ul>
</div>
<div>
<ul class="list2">
<li>
<input type="checkbox" disabled/>
<label>list2-item1</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item2</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item3</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item4</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item5</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item6</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item7</label>
</li>
<li>
<input type="checkbox" disabled/>
<label>list2-item8</label>
</li>
</ul>
<div></div>
<ul class="list3">
<li>
<input type="checkbox" disabled/>
<label>list3-item1</label>
</li>
</ul>
</div>
</body>
</html>

Javascript Object to filter json Array

I've got multiple checkboxes in an HTML form. When I click on a button, the checked values are put into an JavaScript object and a filter function is triggered.
this.filterChkbx.on('click', function() {
_this.checkedFilter.push({
filterEl: this.value
});
});
In the filter function I'm pulling a json file.
$.ajax("ajax/search-test-data.json")
.done(function (data){
...
Now I want to show the objects matching the values from the form. That´s what my json looks like:
{
"searchtest" : [
{
"id" : "001",
"section": "Hochschule",
"group": "Professoren",
"location": "Kaiserslautern",
"date": "HS 2015/11",
"description" : "Lorem ipsum dolor sit amet",
"details" : "VZ",
"deadline" : "27.12.2015",
"topic" : "Lorem"
},
{
"id" : "002",
And this is my form:
<form class="filterThisResults" action="ajax/search-test-data.json" method="GET">
<ul class="filter-list">
<button type="reset">Filter löschen</button>
<div class="search-filter-section">
<li>
<h2>Bereich</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Hochschule">
<label for="check1">Hochschule</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
<label for="check2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Bauen & Gestalten">
<label for="check3">Bauen & Gestalten</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="BWL">
<label for="check4">BWL</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Informatik">
<label for="check5">Informatik</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Logistik">
<label for="check6">Logistik</label>
</li>
</div>
<div class="search-filter-group">
<li>
<h2>Gruppen</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Professoren">
<label for="check1">Professoren</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Studenten">
<label for="check2">Studenten</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Angestellte">
<label for="check3">Angestellte</label>
</li>
</div>
<div class="search-filter-location">
<li>
<h2>Standort</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Kaiserslautern">
<label for="check1">Kaiserslautern</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Pirmasens">
<label for="check2">Pirmasens</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Zweibrücken">
<label for="check3">Zweibrücken</label>
</li>
</div>
<div class="search-filter-topic">
<li>
<h2>Thema</h2>
</li>
<li>
<select class="filterCheckbx" id="topic" name="topic" size="3">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</li>
</div>
<li>
<button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
<li>
</ul>
</form>
What´s the way to go through the json and check which items are true. When more than one item in a form-section is selected, the results are enlarged.
Array.prototype.filter():
creates a new array with all elements that pass the test implemented by the provided function
Array.prototype.some():
tests whether some element in the array passes the test implemented by the provided function
.done(function(data) {
var elementsFoundInData = data.searchtest.filter(function(test) {
return checkedFilter.some(function(flt) {
return test.section === flt.filterEL;
});
});
// show found elements...
})
This is more like pseudo code as you probably would have to adjust the variables (checkFilter, data) a little bit depending on their scopes/types.
Instead push values in object, why should you not try with 'serialize' object property of jQuery.
Try this to store all form data in single string and then use filer and some method to match the values.
function showValues() {
var str = $( "form" ).serialize();
console.log(str);
}
$('[type=reset]').on("click",function(e){
showValues();
event.preventDefault();
})

Categories