I have three different sections for filter and a button and i want to use filter on these sections, I just want to know that
how can i get value of these sections ( inside ul li)
<div id="new-items" class="dropdown">
New Items
<ul class="">
<li><span>New bestsellers</span></li>
<li><span>New releases</span></li>
</ul>
</div>
<div id="buy" class="dropdown">
Buy Now
<ul class="">
<li><span>Wallet</span></li>
<li><span>Website</span></li>
</ul>
</div>
<div id="sort-by" class="dropdown">
Sort By
<ul class="">
<li><span>Low To High Price</span></li>
<li><span>High To Low Price</span></li>
<li><span>View</span></li>
<li><span>View</span></li>
<li><span>Rating</span></li>
<li><span>Sale</span></li>
<li><span>Date</span></li>
</ul>
</div>
<button class="sc-button style letter style-2 filter"><span>Filter</span> </button>
This is how your HTML now renders
You need to convert the <li> to radio buttons.
For example, the sort choices.
<input type="radio" name="sort" value="1"> Low To High Price<br>
<input type="radio" name="sort" value="2"> High To Low Price<br>
<input type="radio" name="sort" value="3"> View<br>
<input type="radio" name="sort" value="4"> View<br>
<input type="radio" name="sort" value="5"> Rating<br>
<input type="radio" name="sort" value="6"> Sale<br>
<input type="radio" name="sort" value="7"> Date<br>
The above looks like this:
It may not be jQuery but it is simple enough in vanilla Javascript. The comments tell you what is happening.
// a global variable to be populated when specific SPAN elements are clicked.
let selection=false;
// bind a delegated listener to the document or suitable ancestor
document.addEventListener('click',e=>{
// If the "click" is on a SPAN of interest, populate the global variable
if( e.target.tagName=='SPAN' && e.target.parentNode.tagName=='LI' ){
selection=e.target;
}
// if the button is clicked, filter ...
if( e.target.tagName=='SPAN' && e.target.parentNode.tagName=='BUTTON' && selection ){
alert(selection.textContent)
}
});
<div id="new-items" class="dropdown">
New Items
<ul class="">
<li><span>New bestsellers</span></li>
<li><span>New releases</span></li>
</ul>
</div>
<div id="buy" class="dropdown">
Buy Now
<ul class="">
<li><span>Wallet</span></li>
<li><span>Website</span></li>
</ul>
</div>
<div id="sort-by" class="dropdown">
Sort By
<ul class="">
<li><span>Low To High Price</span></li>
<li><span>High To Low Price</span></li>
<li><span>View</span></li>
<li><span>View</span></li>
<li><span>Rating</span></li>
<li><span>Sale</span></li>
<li><span>Date</span></li>
</ul>
</div>
<button class="sc-button style letter style-2 filter"><span>Filter</span></button>
get all the li elements inside div, then loop the array
example for the first div:
const newItems = document.querySelectorAll('#new-items li');
newItems.forEach(function(item) {
console.log(item.innerText);
})
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 have multiple divs of 3 checkboxes – each div has a show/hide button (jQuery slideUp) that hides the 'ul.task-list' to display the H2 heading.
<div class="row" id="row-0">
<button class="toggle">Toggle</button>
<h2>Row 0</h2>
<ul class="task-list">
<li><input type="checkbox" id="task-0-0" class="task" value="0" /></li>
<li><input type="checkbox" id="task-0-1" class="task" value="1" /></li>
<li><input type="checkbox" id="task-0-2" class="task" value="2" /></li>
</ul>
</div>
<div class="row" id="row-1">
<button class="toggle">Toggle</button>
<h2>Row 1</h2>
<ul class="task-list">
<li><input type="checkbox" id="task-1-0" class="task" value="0" /></li>
<li><input type="checkbox" id="task-1-1" class="task" value="1" /></li>
<li><input type="checkbox" id="task-1-2" class="task" value="2" /></li>
</ul>
</div>
I call a 'checkTotal' function, and if everything in the row is checked, add the class of "complete" and slideUp the UL.
let sections = $('.row').map(function() { return this.id }).get(); // gets id of row
const tasksTotal = 3; // the total checkboxes in each row
function checkTotal() {
sections.forEach(function(i) { // loops section IDs
let total = $('#'+i+' input:checked').length; // checked in row
total == tasksTotal ? ($('#'+i).addClass('complete'), $('#'+i+' .task-list').slideUp()) : ($('#'+i).removeClass('complete')); // add class & hide row
});
}
checkTotal();
The issue is, if I click to show row 0 (after complete) and then check anything in row 1 – it will automatically slide row 0 up again – as complete remains true (all items are checked).
I just can't figure out how to separate these, so they act independently and without looping through again.
You can passed this under your checkTotal() function which will be used to check only the checkbox which is check by user.Then we can use this to get closest ul and loop through only that part where checkbox is located and then to we need to find checkbox length which are checked we can get that using elem.find("input:checked").length.
Demo Code :
jQuery(function() {
jQuery('.toggle').on('click', function() {
jQuery(this).parent().siblings('.task-list').slideToggle();
});
const tasksTotal = 3; // the total checkboxes in each row
function checkTotal(el) {
//find closest ul
var elem = jQuery(el).closest(".task-list");
//loop through it
elem.each(function() {
//get total count of checked input
let total = elem.find("input:checked").length;
console.log(total)
//apply the same to particular ul
total == tasksTotal ? (elem.addClass('complete'), elem.slideUp()) : (elem.removeClass('complete'));
});
}
$('.task').change(function() {
checkTotal(this);//passed only the checkbox clicked
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="row-0">
<div class="options">
<h2>Row 0</h2>
<button class="toggle">Toggle</button>
</div>
<ul class="task-list" data="abd">
<li><input type="checkbox" id="task-0-0" class="task" value="0" /> <label for="task-0-0"> Item 0</label></li>
<li><input type="checkbox" id="task-0-1" class="task" value="1" /> <label for="task-0-1"> Item 1</label></li>
<li><input type="checkbox" id="task-0-2" class="task" value="2" /> <label for="task-0-2"> Item 2</label></li>
</ul>
</div>
<div class="row" id="row-1">
<div class="options">
<h2>Row 1</h2>
<button class="toggle">Toggle</button>
</div>
<ul class="task-list">
<li><input type="checkbox" id="task-1-0" class="task" value="0" /> <label for="task-1-0"> Item 0</label></li>
<li><input type="checkbox" id="task-1-1" class="task" value="1" /> <label for="task-1-1"> Item 1</label></li>
<li><input type="checkbox" id="task-1-2" class="task" value="2" /> <label for="task-1-2"> Item 2</label></li>
</ul>
</div>
I am trying to get the checked values of a radio group in meteor js. So far i have come up with this.
Js
Template.QuizController.events({
'submit .quiz-ans'(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
console.log(event);
},
});
Html
<template name="QuizQuestion">
<div class="questions">
<h5 class="white-text">{{question}}</h5>
<form action="#" class="quiz-ans">
<ul class="answer-list">
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q1" />
<label for="{{this.order}}q1">{{this.q1.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q2" />
<label for="{{this.order}}q2">{{this.q2.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q3" />
<label for="{{this.order}}q3">{{this.q3.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q4" />
<label for="{{this.order}}q4">{{this.q4.value}}</label>
</li>
</ul>
<div class="test-controlls">
<button class="btn waves-effect waves-light right" type="submit" name="action">Next
<i class="material-icons right">send</i>
</button>
<span class="quiz-count right">1/10</span>
</div>
</form>
</div>
</template>
I was looking inside the target data but still can find the checked value. this is probably very obvious but I cant figure it out.So help wound be great.
Thanks
Your event will contain your form element as event.target. That will contain all your inputs so you can query them, e.g. using jQuery.
For example:
const checked = $(event.target).find("input[name='group1']:checked");
If you wanted to get the value attached to that (like "q1") you could then do:
checked[0].id;
or
checked[0].labels[0].innerHTML;
you can get radio button checked value by
const val= $('input[name=group1]:checked').val();
I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle
My code is also:
jQuery(document).ready(function() {
waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
});
});
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
</li>
</ul>
</div>
</div>
It is because the first radio box has checked="check". Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/
Or, if you really need to do it with JavaScript:
$("#s_method_premium").prop("checked", true)
The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.
<div id="checkout-shipping-method-load">
<div class="sp-methods">
<h3 class="title">Delivery Option</h3>
<p>You must select a delivery option.</p>
<ul>
<li class="delivery-method">
<div class="input-checkout-radio">
<input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
<label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
my door</span>
</label>
</div>
</li>
<li class="delivery-method">
<div class="input-checkout-radio">
<input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
<label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
"price"><span class="currency">£</span>39</span>Take it to my room</span>
</label>
</div>
To do this using jQuery, here's the code snippet:
$('#s_method_premium').attr('checked', 'true');
The basic explanation is that you are using the attr method of jQuery to modify the property (i.e., the first argument) with the desired value (i.e., the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.
Does that help?
I am trying to get the index of an element using jQuery to send to a PHP script.
Here is my XHTML
<form action="/accreditation/questions/" method="post" id="questions-form">
<fieldset id="question-0">
<legend>Question</legend>
<h3>What colour is grass?</h3>
<ul>
<li>
<input type="radio" name="answer[0]" value="0" id="radio-0-0" />
<label for="radio-0-0">Green</label>
</li>
<li>
<input type="radio" name="answer[0]" value="1" id="radio-0-1" />
<label for="radio-0-1">Red</label>
</li>
<li>
<input type="radio" name="answer[0]" value="2" id="radio-0-2" />
<label for="radio-0-2">Orange</label>
</li>
</ul>
</fieldset>
<fieldset id="question-1">
<legend>Question</legend>
<h3>how old is alex</h3>
<ul>
<li>
<input type="radio" name="answer[1]" value="0" id="radio-1-0" />
<label for="radio-1-0">21</label>
</li>
<li>
<input type="radio" name="answer[1]" value="1" id="radio-1-1" />
<label for="radio-1-1">11</label>
</li>
<li>
<input type="radio" name="answer[1]" value="2" id="radio-1-2" />
<label for="radio-1-2">23</label>
</li>
</ul>
</fieldset>
</form>
I need to get the index of the fieldset elements. I am currently using this each iterator (which I'd like not to change because it has a lot of other functions inside it).
$('#questions-form ul li').each(function() {
qIndex = $('fieldset').index($('fieldset', $(this).parent()))
});
I'd like qIndex to be the index of fieldset relative to the form. For example, in this case I should have it equal to 0 and 1 (although there would be 6 values because it's looping through the list elements).
I have played around for a while and have been unable to get the correct index. I keep getting not found (-1).
If it helps, here is the code I'm using to get the list item's index relative to it's containing ul element.
index = $('li', $(this).parent()).index(this);
What is wrong with my fieldset index grabbing code?
The LI's parent is UL, not the fieldset.
I think this will set qIndex for you:
qIndex = $('fieldset').index($(this).parents('fieldset'));
You can also get the index using:
$("form fieldset").each(function(I) {
console.log("fieldset index"+ I);
});