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();
})
Related
I'm trying to figure out why the alert boxes and console logs don't work as intended when I check a checkbox.
jquery code
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
laravel blade checkbox code
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $store_location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" id="location" name="location">
{{ $store_location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>
First you should answer, if the #foreach loop works fine and renders the ul > li list correctly. I gues it works.
The JS Code
I've rewritten your code and it works even though there is a problem in your code. You really should use non-identical id attributes. You can use classes or what ever multiple times in different HTML tags, but not the id attribute. But this does not cause the problem. Have a look on the example:
Example (in plain JavaScript)
document.querySelectorAll('#location').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log('go');
});
});
});
/*
"Equivalent" to your jQuery Code:
$(document).ready(function(){
$("#location").click(function(){
$("input[name='location']:checked").each(function(){
alert("go");
});
});
});
*/
<ul>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
<li>
<input type="checkbox" name="location" id="location">
</li>
</ul>
Better:
document.querySelectorAll('input[name=location]').forEach(locationEl => {
locationEl.addEventListener('click', () => {
document.querySelectorAll('input[name=location]:checked').forEach(el => {
console.log(el.value, 'is checked');
});
});
});
<ul>
<li>
<input type="checkbox" name="location" value="1">
</li>
<li>
<input type="checkbox" name="location" value="2">
</li>
<li>
<input type="checkbox" name="location" value="3">
</li>
<li>
<input type="checkbox" name="location" value="4">
</li>
</ul>
With input[name=location] as a selector you are addressing any input tag with an attribute name with a value of location. And this should just work.
The Blade Template Code
You are using most probably by accident the same variable name for the variable which should be iterated and the output item of each loop. You should try to rename them depending on the name of the variable which holds the array of your desired information:
<div class="sidebar-box">
<h5>Location</h5>
<ul class="checkbox-list">
#foreach($store_location as $location)
<li class="checkbox">
<label>
<input type="checkbox" class="i-check" name="location">
{{ $location->store_location_name }}
</label>
</li>
#endforeach
</ul>
</div>
If this won't work, consider to upload some part of your rendered HTML code. The one you've uploaded is the blade code, right? Or try to debug your variables that you've pushing toward your blade template. Good luck!
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;
There is list inside ul li like below:
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>
When user click on span I must get value of checkbox before this span.
I wrote below code but it return undefined.
$("span.edit").on('click', function () {
var value= (this).parent().siblings("input[type='checkbox']").attr("value");
alert(value);
});
Could you help me please?
You need to use find() method to get the checkbox inside its parent.
Additionally, you can use :checkbox selector to get checkbox element which would be better than the attribute equals selector and the value can be access using val() method.
$("span.edit").on('click', function() {
var value = $(this).parent().find(":checkbox").val();
// or $(this).sblings().find(":checkbox").val()
// or $(this).prev().find(":checkbox").val()
alert(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="AllLayer">
<li>
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" /> OSM
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
<li>
<fieldset id="layer1">
<label class="checkbox" for="visible1">
<input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2
</label>
<span class="edit fa fa-pencil-square">eidt</span>
</fieldset>
</li>
</ul>
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>
I have a checkbox for brands and a check box for prices. Now if a user clicks on the check box I want an array of brand_ids and an array of prices.
<div class="left-filters__inner--block">
<ul class="filter-data filter-data-brands" id="brands_list">
#foreach(App\Brand::all() as $brand)
<li>
<label for="{{$brand->name}}" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" name="brands[]" id="{{$brand->name}}" class="mdl-checkbox__input" data-value="{{$brand->id}}">
<span class="mdl-checkbox__label">{{$brand->name}}</span>
</label>
</li>
#endforeach
</ul>
</div>
price view with checkbox
<div class="left-filters__inner--block">
<ul class="filter-data filter-data-price" id="price_list">
<li>
<label for="less-20" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="less-20" class="mdl-checkbox__input" name="price" data-value="0,20">
<span class="mdl-checkbox__label">Less than 20</span>
</label>
</li>
<li>
<label for="21-50" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="21-50" class="mdl-checkbox__input" name="price" data-value="21,50">
<span class="mdl-checkbox__label">21 - 50</span>
</label>
</li>
<li>
<label for="51-100" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="51-100" class="mdl-checkbox__input" name="price" data-value="51,100">
<span class="mdl-checkbox__label">51 - 100</span>
</label>
</li>
Now when user clicks on the checkbox a particular brand or price I want an array which looks like this.
Array
(
[brand_id] => Array
(
[0] => 1
[1] => 2
[2] => 3
)
[price] => Array
(
[0] => 0,1000
[1] => 1000,2000
)
)
I want to achieve this using jquery. Please assists
https://jsfiddle.net/2moqx8da/
$("input:checkbox").click(function() {
var brandids=[], prices=[];
$("input[name='brands']:checked").each(function() {
brandids.push($(this).val())
});
$("input[name='price']:checked").each(function() {
prices.push($(this).val())
});
$('#output').text(JSON.stringify([brandids, prices]));
});