I'm trying to grab the value of a hidden field that resides above each group of LI's with javascript, I cannot use jQuery because of an unreasonable client's concerns (believe me, I've tried, they just don't want to "risk" adding a library)... anyway...
The list would look something like this:
<input id="hidden1" type="hidden" value="5" class="includeds">
<h3>header</h3>
<ul class="groups">
<li><input id="li1" type="checkbox" value="1" onclick="value()"></li>
<li><input id="li2" type="checkbox" value="2" onclick="value()"></li>
<li><input id="li3" type="checkbox" value="3" onclick="value()"></li>
</ul>
<input id="hidden2" type="hidden" value="3" class="includeds">
<h3>header2</h3>
<ul class="groups">
<li><input id="li4" type="checkbox" value="4" onclick="value()"></li>
<li><input id="li5" type="checkbox" value="5" onclick="value()"></li>
<li><input id="li6" type="checkbox" value="6" onclick="value()"></li>
</ul>
So if I click on checkbox li1, I want to retrieve the value "5" from the hidden field above it.
If I click li5, I want to get the value of "2" from the first hidden field above it, etc, etc.
in a previous SO question some amazing people helped me do this with jQuery:
if($(this).closest('ul').prevAll('.includeds:first').val() !== '0') {
// logic here
}
but when presented to the client, I ran into the aforementioned complaints. So now I need to do the same thing with javascript vanilla. I appreciate any help or pointers you guys could provide. I apologize for asking the same question twice, between jquery and javascript.
Uhm, the jQuery code I'd use would be:
$(this).parent().prev().prev().val()
With that in mind, all you have to do is rewrite the code to correct plain javascript entities.
The result would be something like:
function getParent(node){
return node.parentNode;
}
function getPrev(node){
do { // loop to find the previous node that is an element
node = node.previousSibling;
}while(node && node.nodeType != 1);
return node;
}
getPrev(getPrev(getParent(this))));
If you can't use jQuery then complex queries like the on you mentioned become much more difficult. In liue of jQuery it's easiest to reference elements by their ID tag or by a class filter (depending on the scenario).
Here i would say the best bet is to hard code the given input ID into the onclick function.
HTML
<input id="hidden2" type="hidden" value="3" class="includeds">
<h3>header2</h3>
<ul class="groups">
<li><input id="li4" type="checkbox" value="4" onclick="value('hidden2')"></li>
<li><input id="li5" type="checkbox" value="5" onclick="value('hidden2')"></li>
<li><input id="li6" type="checkbox" value="6" onclick="value('hidden2')"></li>
</ul>
JavaScript
function value(id) {
var elem = document.getElementByID(id);
...
}
Related
I would like to be able to set a class name on the container around various radio groups on a page which would allow those radio groups to be uncheckable / detickable - thus allowing the user to set a radio field back to nothing. The names should be assumed to be dynamic so the code is as reusable as possible. I think it is fair to assume that only one unique input name would occur within each element set with the class.
I am aware this is non-standard.
I am aware that similar questions have been put before.
The complexity of the question is handling multiple groups of radios with dynamically generated names in a simple and consistent way. Generally most solutions I have seen keep track of the current selection either by applying classes to the radio inputs in some other way. Any answers that care to discuss the pros and cons of the various events that are best listened to would also be of value.
Example html:
<ul class="detickable-radio">
<li><input name="x1" type="radio" value="a" id="r_1_1"><label for="r_1_1">First Q First A</label></li>
<li><input name="x1" type="radio" value="b" id="r_1_2"><label for="r_1_2">First Q 2nd A</label></li>
</ul>
<ul>
<li><input name="y1" type="radio" value="c" id="r_2_1"><label for="r_2_1">Second Q First A</label></li>
<li><input name="y1" type="radio" value="d" id="r_2_2"><label for="r_2_2">Second Q 2nd A</label></li>
</ul>
<ul class="detickable-radio">
<li><input name="z1" type="radio" value="e" id="r_3_1"><label for="r_3_1">Third Q First A</label></li>
<li><input name="z1" type="radio" value="f" id="r_3_2"><label for="r_3_2">Third Q 2nd A</label></li>
</ul>
Desired Result: the x1 and z1 radios would be uncheckable and the y1 radio would not be.
Vanilla and jQuery answers are both welcome. Cheers.
Update - I have set it as complete although it does not yet function for keyboard entry. In general I would suggest that an approach of keeping track of the checked values and then checking on each change event would give better coverage. Also I think that it would be neater to change checkboxes to allow a single value to be checked than to change a radio to detickable. Also I can't believe Nevada isn't going to provide any further count updates for another day.
You could do something like this:
var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
var $this = $(this).is(":radio") ? $(this) : $(this).prev();
s = $this.is(":checked")
}).mouseup(function(e) {
var $this = $(this).is(":radio") ? $(this) : $(this).prev();
$this.prop("checked", !s)
}).click(function(e) {
e.preventDefault()
});
var s;
$('.detickable-radio input:radio, .detickable-radio input:radio ~ label').mousedown(function(e) {
var $this = $(this).is(":radio") ? $(this) : $(this).prev();
s = $this.is(":checked")
}).mouseup(function(e) {
var $this = $(this).is(":radio") ? $(this) : $(this).prev();
$this.prop("checked", !s)
}).click(function(e) {
e.preventDefault()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="detickable-radio">
<li><input name="x1" type="radio" value="a" id="r_1_1"><label for="r_1_1">First Q First A</label></li>
<li><input name="x1" type="radio" value="b" id="r_1_2"><label for="r_1_2">First Q 2nd A</label></li>
</ul>
<ul>
<li><input name="y1" type="radio" value="c" id="r_2_1"><label for="r_2_1">Second Q First A</label></li>
<li><input name="y1" type="radio" value="d" id="r_2_2"><label for="r_2_2">Second Q 2nd A</label></li>
</ul>
<ul class="detickable-radio">
<li><input name="z1" type="radio" value="e" id="r_3_1"><label for="r_3_1">Third Q First A</label></li>
<li><input name="z1" type="radio" value="f" id="r_3_2"><label for="r_3_2">Third Q 2nd A</label></li>
</ul>
Here is the checklist radio button code I am using right now, I would like to convert it into a checklist with submit button. Currently, selecting one option will filter the result instantly, but i want to select multiple options and click submit button to get result. I want to use it without effecting the existing functions, as an addon feature.
In short it should allow to select more than one option at a time and submit.
Someone give me an example on how to do this ?
I am trying to learn JQuery and javascript, and need someone's help.
I tried but couldn't get a working result.
I want to use this method
<form>
<ul>
Brand
<li><input name="Samsung" type="checkbox" value="Samsung" /> Samsung</li>
<li><input name="OnePlus" type="checkbox" value="OnePlus" /> OnePlus</li>
<li><input name="Apple" type="checkbox" value="Apple" /> Apple</li>
</ul>
<ul>
RAM
<li><input name="1GB" type="checkbox" value="1GB" /> 1GB</li>
<li><input name="2GB" type="checkbox" value="2GB" /> 2GB</li>
</ul>
<div><button id="apply">Apply</button> <button id="apply">Clear</button></div>
</form>
So that the filter will not apply automatically, this funtion is for mobile pages.
and in PC, the regular auto filter will work.
Example image attached
<h3>Sort</h3>
<div class="list-group-item checkbox">
<label for="radio1">
<input type="radio" id="radio" class="common_selector brand" name="radio" value="Samsung"> Samsung
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Apple" > Apple
</label>
<label>
<input type="radio" class="common_selector brand" name="radio" value="Nokia" > Nokia
</label>
<label>
</div>
The following JQuery function is capturing data from this checklist
<script>
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var brand = get_filter('brand');
var sort = get_filter('sort');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, sort:sort},
success:function(data){
$('.filter_data').html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:1000,
max:95000,
values:[1000, 95000],
step:500,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
</script>
I tried the following code, but it didn't work.
<form>
<input type="checkbox" value="Samsung"> Samsung
<input type="checkbox" value="Apple"> Apple
<input type="button" id="apply" class="common_selector brand" value="Submit">
</form>
$('#apply').click(function(){
filter_data();
});
In the html, convert the radiobuttons to checkboxes. Then create the Apply button. In the script, connect the click event of the Apply button to the filter_data function.
<form>
<input type="checkbox" class="brand" id="samsung" value="Samsung"> Samsung
<input type="checkbox" class="brand" id="apple" value="Apple"> Apple
<button id="apply" class="common_selector brand">Apply</button>
</form>
The script would then be
$('#apply').click(function(){
filter_data();
});
In place of "$('#apply')" you will include a selector for the button, which can be based on the identifier (as above).
I would like to check boxes via javascript.
The thing is I have a task to check more then 300 checkboxes whith specific names.
I can check one box, or check all boxes... but how to check specific boxes?
Here is an example:
<li id="s1" class="city-select">
<input name="rid" id="r1" value="1" type="checkbox">
<label for="r1" id="l1">Paris</label>
</li>
<li id="s1" class="city-select">
<input name="rid" id="r2" value="2" type="checkbox">
<label for="r2" id="l2">Plovdiv</label>
</li>
<li id="s1" class="city-select">
<input name="rid" id="r3" value="3" type="checkbox">
<label for="r3" id="l3">Berlin</label>
</li>
I would like to tick only "Berlin" and "Paris" - here is what I'm using to tick all:
[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});
And here is what am I trying to type:
$("lable:contains('paris, berlin')").prev().find('input').addAttr("checked");
You have wrong selector to target checkboxes. You need to use:
$("label:contains(Paris),label:contains(Berlin)").prev().prop("checked",true);
Working Demo
Update:
var cities = ["Paris","Berlin"];
$("label:contains('" + cities.join("'),label:contains('") + "')").prev().prop("checked",true);
Working Fiddle for update
It looks like your use of prev should be parent or closest.
So you take the current label, go up to the container, then down to the checkbox.
If you use prev then you restrict how much you can change the html (eg if you add a div wrapper around the label in the future, you'll have to change all your code).
given:
<li id="s1" class="city-select">
<input name="rid" id="r3" value="3" type="checkbox">
<label for="r3" id="l3">Berlin</label>
</li>
then use
$("label:contains(Paris),label:contains(Berlin)")
.closest("li")
.find(":checkbox")
.prop("checked",true);
More info at the API documentation: https://api.jquery.com/closest/
How to use this for 300 cities?
This depends on how they are stored. If it's a comma separated list (Paris,Berlin) then split into an array first, if it's json, then convert to an array first...(see the pattern?)
var citiesList = "Paris,Berlin".split(",");
$(citiesList).each(function() {
$("label:contains(" + this + ")")
.closest("li")
.find(":checkbox")
.prop("checked",true);
});
the input check box code:
<li class="odd"><input type="checkbox" class="forminput" name="VD10" checked="checked" value="http://test1.com">
example 1</li>
<li class="even><input type="checkbox" class="forminput" name="VD11" checked="checked" value="http://test2.com">
example 1</li>
<li class="odd"><input type="checkbox" class="forminput" name="VD12" checked="checked" value="http://test3.com">
example 1</li>........
the button code:
<li>
<input type="checkbox" id="checkall" name="checkall" checked="checked">
<label for="checkall">check all</label>
<input type="button" value="copy the checked link" class="button">
</li>
now, i want to do when click the copy the checked link button. it will copy the checked input value to the clipboard? how do i do?
Try this,
$(".button").click( function () {
var selectedCheckboxValue = "";
$('input.forminput:checked').each(function() {
selectedCheckboxValue += $(this).val() + ", ";
});
alert(selectedCheckboxValue);
});
click here see the working demo. http://jsfiddle.net/t5TKm/
You can't copy to the clipboard without flash, silverlight, or some other rich-client plugin.
But, here is the answer to that question: How do I copy to the clipboard in JavaScript?
And: How to retrieve checkboxes values in jQuery
You can use the document.getElementByTag('VD10').checked to check if the checkbox is checked or not
I am having some difficulty in using the jQuery Validator plugin. I have a list of checkboxes with different name attributes and I can't seem to figure out how to ensure that at least one of them has been checked. Everything that I find on Google seems to only work when the name attribute is the same.
Here is some sample code (updated):
<ul id="email_lists">
<li>
<input name="checkbox1" type="checkbox" /> List 1
</li>
<li>
<input name="checkbox2" type="checkbox" /> List 2
</li>
<li>
<input name="checkbox3" type="checkbox" /> List 3
</li>
<li>
<input name="checkbox4" type="checkbox" /> List 4
</li>
</ul>
I want to make sure that at least one of those is checked. Unfortunately, I cannot make the names the same as it is form that submits to a third-party email marketing application and it is expecting specific name attributes for these checkboxes.
Update
I am aware of how to do this using plain jQuery, but I would prefer to use the jQuery Validator plugin since that is how all of the other validation on the page is done.
I can group those checkboxes using jQuery by saying $('#email_lists li');, but I'm not really sure how to use something like that and tell the jQuery Validator plugin to use that as a group.
Assuming that you can give the checkboxes a class name (the jQuery needs something to work with):
<input class="validationGroupOne" name="checkbox1" type="checkbox" />
<input class="validationGroupOne" name="checkbox2" type="checkbox" />
<input class="validationGroupOne" name="checkbox3" type="checkbox" />
<input class="validationGroupOne" name="checkbox4" type="checkbox" />
You should be able to plug in the .validationGroupOne class-selector in place of the, usual, name attribute.
This was my solution :-)
Use:
<div id="list">
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
</div>
<input type="hidden" name="the_real_field_name" />
Then in jquery validate plugin block:
rules : {
chkbox: "required"
},
Then store the values as an array into a single hidden field like:
function updateInput() {
var allVals = [];
$('#list :checked').each(function() {
allVals.push($(this).val());
});
$('#the_real_field_name').val(allVals);
}
$(function() {
$('#list input').click(updateInput);
updateInput();
});