Here is a small piece of javascript code snippet that passes an array to the request
let input = range.find('input');
let values = [];
if ($(this).hasClass('active')) {
values.push($(this).data('value'));
}
input.val(values);
When an element is clicked, the class active is assigned to it and the value of this element is sent to the request.
Now the code works so that when you select several elements, something like this will go into the query [values]: 1,2,3
The question is, is it possible on the Javascript side to make the array go into the request a little differently. That is, in the request itself it looked like this:
[values]
[values][]: 1
[values][]: 2
[values][]: 3
html
<div class="range">
<input type="hidden" id="values" class="form-control" name="[values]" value="1,2,3">
<span class="it active" data-value="1">value 1</span>
<span class="it active" data-value="2">value 2</span>
<span class="it active" data-value="3">value 3</span>
<span class="it" data-value="4">value 4</span>
</div>
UPDATE
I need to make it so that if we find the active class, then we get its data-value and form a new input with this value, which will have name="[values][]" and value="1"
Let's say there are two active classes that have data-value="1" and data-value="3".
From this in JS we form two inputs in order to get this in the code:
<input type="hidden" id="values---0" class="form-control" name="[values][]" value="1">
<input type="hidden" id="values---2" class="form-control" name="[values][]" value="3">
=======================================
$(function() {
$(".range .it").click(function() {
$(this).toggleClass('active');
$("<input>", {
value: $(this).data("value"),
name: "[value][]",
type: "hidden",
id: "value--" + $(this).data("value")
}).appendTo(".range");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range">
<input type="hidden" id="values" class="form-control" name="[values]" value="">
<span class="it" data-value="1">value 1</span>
<span class="it" data-value="2">value 2</span>
<span class="it" data-value="3">value 3</span>
<span class="it" data-value="4">value 4</span>
</div>
Now when I click on any of the values, active is assigned to this class, when you click again, this class is deleted. But at the same time, inputs are added with each click, and can go to infinity. I need that when there is an active class, the input is added, when the active class is removed, the input should be deleted along with it
Consider the following.
$(function() {
function makeInput(val) {
return $("<input>", {
value: val,
name: "[value][]",
type: "hidden",
id: "value---" + val
});
}
function reloadRange(sel) {
$(".hidden").empty();
$(sel).each(function(i, el) {
$(".hidden").append(makeInput($(el).data("value")));
});
}
$(".range .it").click(function() {
$(this).toggleClass("active");
reloadRange(".active");
});
});
.range span.it {
border: 1px solid transparent;
border-radius: 3px;
padding: 0.2em 0.4em;
}
.range span.active {
border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range">
<input type="hidden" id="values" class="form-control" name="[values]" value="1,2,3">
<span class="it active" data-value="1">value 1</span>
<span class="it active" data-value="2">value 2</span>
<span class="it active" data-value="3">value 3</span>
<span class="it" data-value="4">value 4</span>
<div class="hidden"></div>
</div>
When you click on an active class, it created the HTML.
<div class="hidden">
<input value="1" name="[value][]" type="hidden" id="value---1">
<input value="3" name="[value][]" type="hidden" id="value---3">
</div>
Updated
When User clicks on an item, the class is toggled and the input items are rebuilt.
Related
I have divs that contain 1 checkbox within it. Whenever I click the div, it will change the class name of the div. Additionally, I want to check & uncheck the tags while changing the class name of the div.
$(".tags").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).addClass("inactive");
} else if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive");
$(this).addClass("active");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.active{
color: green;
}
.inactive{
color: red;
}
</style>
<div class="tags active" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags active" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags active" name="item3"> Item3 <input type="checkbox" name="item3"></div>
How do I find a checkbox inside it each div and check/uncheck will clicking on the div?
You can do it much shorter:
$(".tags").click(function () {
$(this).toggleClass("active inactive")
.find("input:checkbox").prop("checked",$(this).hasClass("active"))
})
.active {background-color: yellow}
.inactive {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags inactive" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags inactive" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags inactive" name="item3"> Item3 <input type="checkbox" name="item3"></div>
Update:
I changed from .attr() to prop() since otherwise I had problems when changing the checkbox directly. In this context it did not matter whether I used the mouse or the keyoard.
This might not be the thing you're after but in this case it might be the better way. <label> has a property for which links it to an input automatically. This method is potentially more accessible (because the browser understands what is going on) and because it is not depending on click events there are no gotchas when toggling the checkbox with your keyboard.
$(".tags input").change(function() {
if (this.checked)
$(this).parents(".tags").addClass("active").removeClass("inactive");
else
$(this).parents(".tags").removeClass("active").addClass("inactive");
});
.active {
color: green;
}
.inactive {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags inactive" name="item1">
<label for="item1">Item1</label>
<input type="checkbox" id="item1" />
</div>
<div class="tags inactive" name="item2">
<label for="item2">Item2</label>
<input type="checkbox" id="item2" />
</div>
<div class="tags inactive" name="item3">
<label for="item3">Item3</label>
<input type="checkbox" id="item3" />
</div>
You just need to search the clicked element for the checkbox descendant and toggle its .checked property.
Additionally, you don't really need an inactive class. Inactive is just the normal style and only when an element becomes active do you need to override the default. When it's no longer active, you just remove that class and revert back to the default.
$(".tags").click(function () {
// Find the input within the clicked div and
// set its checked property to the opposite
// of what it currently is.
$(this).find("input").prop("checked", !$(this).find("input").prop("checked"));
// Toggle the active class
$(this).toggleClass("active");
});
div.active {background-color: yellow; border: 0;}
.tags {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags"> Item3 <input type="checkbox" name="item3"></div>
just few month ago started learning programming. At the moment studying JS and want to make dropable droplist. Created few droplists and occur with the problem, what all dropdown lists opening after click. Need to be opened only one which was clicked:
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<div class="main">
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
<div class="droplist__box">
<div class="droplist__selected">
<span>Choose options</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="droplist__items-container">
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 1</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 2</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 3</span>
</label>
</div>
<div class="droplist__item">
<label for="">
<input type="checkbox" name="" id="">
<span>Option 4</span>
</label>
</div>
</div>
</div>
</div>
And write simple JS vanilla code:
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
for (i = 0; i < droplist.length; i ++){
droplist[i].classList.toggle('display')
};
});
}
Can somebody tell me where i made a mistake?
https://codepen.io/miroso/pen/dyGXOYq
Thanks for helping me, want to ask extra question: Also, maybe could you suggest solution if for example click is made outside the div, what condition i should write in the code?
You are doing toggle to all the containers... you should toggle only the one that corresponds to clicked element... so in you javascript you should take care of that, if you change your javascript for:
const droplistLabel = document.querySelectorAll('.droplist__selected');
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist;
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// get container of list and toggle
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplist.classList.toggle('display');
});
}
As you can see, first get parent of clicked element that has class droplist__selected, then toggle list of parent container... and that's all.
Edit 1
Maybe this is more complicated... you have to:
Add event to document click to close all.
On an item click close all but clicked one.
Toggle clicked item.
So:
const droplistLabel = document.querySelectorAll('.droplist__selected');
document.addEventListener('click', (e) => {
// close all...
droplist = document.querySelectorAll('.droplist__items-container');
for(j=0;j<droplist.length;j++) {
droplist[j].classList.remove('display');
}
});
for (i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', (e) => {
let parent, droplist, droplists;
// Cancel event to avoid document.click reached...
e.stopPropagation();
// look for droplist__selected
parent=e.srcElement;
while(!parent.classList.contains('droplist__selected')) {
parent=parent.parentElement;
}
// close all but clicked, get clicked and compare with the others...
droplist = parent.parentElement.querySelector('.droplist__items-container');
droplists = document.querySelectorAll('.droplist__items-container');
for(let j=0;j<droplists.length;j++) {
if(droplists[j]!=droplist) {
droplists[j].classList.remove('display');
}
}
// finally toggle clicked... get container of list and toggle
droplist.classList.toggle('display');
});
}
Hope it helps!!!
Change your javascript code to
Step 1: toggle the display clicked element, if already in shown state then hide and vice-versa
Step 2: for all the other element except the clicked item - remove the class to hide them
const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');
for (let i = 0; i < droplistLabel.length; i ++){
droplistLabel[i].addEventListener('click', () => {
droplist[i].classList.toggle('display');**// toggle the display clicked element, if already in shown state then hide and vice-versa**
for(let j=0;j<droplist.length;j++)
{
if(i!=j)**//for all the other element except the clicked item - remove the class to hide them**
droplist[j].classList.remove('display');
}
});
}
I'm developing an OfficeApp with JavaScript and jQuery and it's almost complete, except for one function that does not do what it should do.
I have this html for the choicefieldgroup:
<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
<div class="ms-ChoiceFieldGroup-title">
<label class="ms-Label" id="lblSelectType">Select type:</label>
</div>
<ul class="ms-ChoiceFieldGroup-list">
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-amount" value="amount">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblAmount">Amount</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-datetime" value="datetime">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
<span class="ms-Label" id="lblDateTime">Date / time</span>
</label>
</li>
<li class="ms-RadioButton">
<input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-year" value="year">
<label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup" id="testjaar">
<span class="ms-Label" id="lblYear">Year</span>
</label>
</li>
</ul>
</div>
In javascript I do the following:
Office.initialize = function (reason) {
$(document).ready(function () {
**$('input[id=radio1-year]').attr('checked', true);**
var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
}
});
};
With the bold line the option should be checked. If I check in code, the option is checked, but it is not shown in the UI. What am I doing wrong. Or must I add something extra?
Instead of the bold line I have also used the following (all with the same result):
$('#radio1-year').prop('checked', true);
I think the label is what controls the UI.
Try $('#radio1-year').siblings('label').attr('aria-checked',true);
I would like to combine two filters when clicking two different sections of buttons. Right now, when I click one button it removes the selection of the previous one. I have tried several functions but I have not been able to come with the right logic.
I have written a schema of my current status.
HTML
<!-- Buttons -->
<p> Language: <button class="btn" data-category="en"> EN </button> <button class="btn" data-category="it"> IT </button> </p>
<p> Stuff: <button class="btn" data-category="a"> A </button> <button class="btn" data-category="b"> B </button> <button class="btn" data-category="c"> C </button> </p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
js / jQuery
$(".btn").click(function(e){
e.preventDefault();
var category = $(this).data("category")
$('.element').hide();
$('.element.'+category).fadeIn();
})
It's also in this fiddle.
Also, nice to haves:
I would like to know how to color the button once it is selected.
Add a reset button (which I guess would be easy adding "reset" in data-category.
Thanks for the advice and the suggestions in advance!
One method is to use radio buttons. They allow one selection per group.
One downside is that you can't uncheck a radio button unless its by selecting another one in the same group, so I've added a "reset" button to each group.
Upon selection, I'm building a selector string of classes based on the checked buttons.
$(".mycb input").on('change', function(e) {
// select all the checked buttons.
var $checked = $('.mycb :checked');
// build an array of all the checked values.
var checked_classes = $checked.map(function() {
return this.value;
}).toArray();
// add the baseline "element" class to the array.
checked_classes.unshift('.element');
// build the class selector string.
var classes=checked_classes.join('.');
// debug the class selector string.
// console.log(classes);
// hide all elements.
$('.element').hide();
// show the elements that match the class selector string.
$(classes).fadeIn();
});
$('.reset').on('click', function() {
var $container = $(this).closest('p');
$('input', $container).prop('checked', false).last().trigger('change');
});
btn-selected {
color: red;
}
.mycb input {
display: none;
}
.mycb span {
background-color: white;
border: 1px solid #CCC;
border-radius: .3em;
padding: 0 .3em;
cursor:pointer;
user-select: none;
}
.mycb input:checked+span {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button -->
<p>Language:
<label class="mycb">
<input type="radio" name="lang" value="en">
<span>EN</span>
</label>
<label class="mycb">
<input type="radio" name="lang" value="it">
<span>IT</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<p>Stuff:
<label class="mycb">
<input type="radio" name="stuff" value="a">
<span>A</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="b">
<span>B</span>
</label>
<label class="mycb">
<input type="radio" name="stuff" value="c">
<span>C</span>
</label>
<span class="mycb reset"><span>Reset</span></span>
</p>
<!-- Elements to select -->
<div class="element en a">
<p>en A</p>
</div>
<div class="element en b">
<p>en B</p>
</div>
<div class="element it c">
<p>it C</p>
</div>
<div class="element it b">
<p>it b</p>
</div>
I have forked your js fiddle to provide a solution using your CSS class
https://jsfiddle.net/sguex20k/
JavaScript
$('.btn').removeClass('btn-selected'); // resetting all buttons to remove class
/* other code */
$(this).addClass('btn-selected'); // adding class to clicked button
And the problem in your CSS you were missing the . in your selector
.btn-selected { }
I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?
$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/