I have the following code:
<ul id="litemsd">
<li class="litemd">
<input type="checkbox" id="d1" name="d1" />
<label for="d1">Number One</label>
</li>
<li class="litemd">
<input type="checkbox" id="d2" name="d2" />
<label for="d2">Numer Two</label>
</li>
<li class="litemd">
<input type="checkbox" id="d3" name="d3" />
<label for="d3">Numer Three</label>
</li>
</ul>
And inside the form's submit observe function I try to iterate over the selected checkboxes:
$$('li.litemd').pluck('checked').each(function(s) {
alert(s.next().innerHTML)
});
But whe that code is reached, the following error pops up in firebug:
"s is undefined"
Any hints ?
I think you're confusing the properties which pluck() works on with HTML attributes. It's anyway easier to add the pseudo class of checked as part of the initial selector, like:
$$('li.litemd input:checked').each(function(s) {
alert(s.next().innerHTML);
});
Example
$$('li.litemd').pluck('checked').each(function() {
alert($$(this).next().innerHTML)
});
?
.pluck() returns an array of values (whatever property name you passed in), so it's not filtering your results to the checked ones, it's literally returning a [false, false, false] array.
Instead I think you want this:
$$('li.litemd input').each(function(s) {
if(s.checked) alert(s.next().innerHTML)
});
You can give it a try here, note the addition of input to the selector, since you're cheking on the property of the <input> inside the <li>, not on the <li> itself.
Related
I have a checkbox with 3 Values
'Father' , 'Mother' and Secretary. I tried to target individual checkboxes values but the issue is that i don't know the ID/name of the tag.
I can't use getElementById , getElementByClass etc...
I tried to add a specific CSS class 'SPECIFIC_CSS' but gforms added it to the li tag. I can only identify the value of the checkboxes (Father,Mother,Secretary).
How can I target those specific checkboxes? can i target their values ? How? Do you have another method i didn't think of ?
<li id="field_31_3-1-1" class="gfield SPECIFIC_CSS field_sublabel_below field_description_below gfield_visibility_visible gf_repeater_child_field" data-repeater-parentid="1" data-repeater-repeatid="1" data-repeater-childid="1">
<label class="gfield_label">Checkboxes Test 1</label><div class="ginput_container ginput_container_checkbox"><ul class="gfield_checkbox" id="input_31_3">
<li class="gchoice_31_3_1">
<input name="input_3.1-1-1" value="Father" id="choice_31_3_1-1-1" tabindex="1" data-repeater-inputid="1" type="checkbox">
<label for="choice_31_3_1-1-1" id="label_31_3_1">Father</label></li>
<li class="gchoice_31_3_2">
<input name="input_3.2-1-1" value="Mother" id="choice_31_3_2-1-1" tabindex="1" data-repeater-inputid="2" type="checkbox">
<label for="choice_31_3_2-1-1" id="label_31_3_2">Mother</label></li>
<li class="gchoice_31_3_3">
<input name="input_3.3-1-1" value="Secretary" id="choice_31_3_3-1-1" tabindex="1" data-repeater-inputid="3" type="checkbox">
<label for="choice_31_3_3-1-1" id="label_31_3_3">Secretary</label>
</li></ul></div></li>
You could use something like the following:
document.querySelector('input[value="Father"]').checked = true;
or if you just want the element without checking it:
document.querySelector('input[value="Father"]');
I have 2 problems
1.First i need to allow only one div open , so when div question1 is show
div question2 and all other should hide, actually its not case in my poor code :).
2.Second problem , I achieve to made a code with an addclass when "is checked", but actually i duplicate all the code for each div .. Perhaps someone have a better elegant option to merge the code and avoiding duplicate code..
$(".checkbox").hide();
$(".question").show();
$('.question').click(function(){
$(".checkbox").toggle(10);
});
$('#test').change(function(){
if($(' input[type=checkbox]:checked').length) {
$('div.question').addClass("question-active");
} else {
$('div.question').removeClass("question-active");
}
});
$(".checkbox2").hide();
$(".question2").show();
$('.question2').click(function(){
$(".checkbox2").toggle(10);
});
$('#test2').change(function(){
if($(' input[type=checkbox]:checked').length) {
$('div.question2').addClass("question-active");
} else {
$('div.question2').removeClass("question-active");
}
});
Here is my code : http://jsfiddle.net/5C3p9/3/
Thanks for help
Regards
If you want to keep your HTML markup as it is, this should work:
// The ^= selector is used to select the elements which have the
// property starting with the text provided.
// ie: class starting with checkbox
$("div[class^='checkbox']").hide();
$("div[class^='question']").show();
$("div[class^='question']").click(function () {
// This way you are able to close the clicked one itself
$("div[class^='checkbox']").not($(this).next()).hide();
$(this).next("div[class^='checkbox']").toggle(10);
});
$("ul[id^='test']").change(function () {
// You can use the .toggleClass() method giving the class name
// and a boolean (add/remove) as parameters
$(this)
.parents()
.prev("div[class^='question']")
.toggleClass("question-active", $("input[type='checkbox']:checked").length != 0);
});
Demo: http://jsfiddle.net/5C3p9/7/
EDIT: I've put some comments in the code.
Some minor dom changes
<div class="quest question"></div>
<div class="ans checkbox">
<ul id="test">
<li>
<input type="checkbox" name="question-1" value="1"
/> is it vegetables ?
</li>
<li>
<input type="checkbox" name="question-2" value="2"
/> is it melon ?
</li>
</ul>
</div>
<div class="quest question2"></div>
<div class="ans checkbox2">
<ul id="test2">
<li>
<input type="checkbox" name="question-1" value="1"
/> is it vegetables ?
</li>
<li>
<input type="checkbox" name="question-2" value="2"
/> is it melon ?
</li>
</ul>
</div>
then
$(".quest").show();
$(".ans").hide();
$('.quest').click(function(){
$(this).next().toggle(10);
});
$('.ans').change(function(){
var $ans = $(this).closest('.ans');
$ans.prev().toggleClass('question-active', $ans.find('input:checkbox:checked').length > 0)
});
Demo: Fiddle
I made some modifications to your code. What I did is that I added some HTML-classes and made the javascript more general and traverse the HTML instead of pointing straight to the element.
Here's the jsFiddle: http://jsfiddle.net/E595w/1/
The new HTML:
<div class="question"></div>
<div class="checkbox">
<ul id="test" class="test">
<li>
<input type="checkbox" name="question-1" value="1"> is it vegetables ?
</li>
<li>
<input type="checkbox" name="question-2" value="2"> is it melon ?
<li>
</ul>
</div>
<div class="question"></div>
<div class="checkbox">
<ul id="test2" class="test">
<li>
<input type="checkbox" name="question-1" value="1"> is it vegetables ?
</li>
<li>
<input type="checkbox" name="question-2" value="2"> is it melon ?
<li>
</ul>
</div>
And here's the resulting Javascript:
$(".checkbox").hide();
$(".question").show();
$('.question').click(function(){
$('.checkbox').hide();
$(this).next(".checkbox").toggle(10);
});
$('.test').change(function(){
if($(' input[type=checkbox]:checked').length) {
$(this).parents('.checkbox').prev('div.question').addClass("question-active");
} else {
$(this).parents('.checkbox').prev('div.question').removeClass("question-active");
}
});
EDIT: Updated with code to answer your #1 question. See updated link to jsFiddle.
put to all your questions same class .question
if you want to differentiate between questions, use ids instead
also, put to to all answers container .checkbox
then use this function which will work for questions , no matter how many you have
$('.question').click(function(){
$(".checkbox").hide();
$(this).next(".checkbox").show(10);
});
I have a form that I need to switch the order of the options in. I need to do it conditionally (not every time) after the page has loaded and it makes sense to use jquery for this task.
Here's the HTML as it initially renders:
<ol class="choices-group">
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
</ol>
I want the jquery to reverse the order of the elements so it looks like this:
<ol class="choices-group">
<li class="choice">
<label for="third">
<input id="third" type="radio" value="100.0">$100</input>
</label>
</li>
<li class="choice">
<label for="second">
<input id="second" type="radio" value="50.0">$50</input>
</label>
</li>
<li class="choice">
<label for="first">
<input id="first" type="radio" value="25.0">$25</input>
</label>
</li>
</ol>
In this example there were three options, but it may be any number between 1 and 7.
Can anyone see a good way to do this?
This should do it:
$(".choices-group").html($(".choice").get().reverse());
See a working example:
http://jsfiddle.net/epignosisx/bX3Kf/
This should be fairly simply. I would use Javascript object to help manage it where the key-part (property name) is the value used to evaluate the condition and the value is the reference to the DOM. Then you just append them back into ol in correct order.
var temp = {};
$.each('ol li', function(k, v){
var $this = $(v);
temp[$this.attr('someAttribute')] = $this;
});
/*some sorting logic and appending them back*/
This way, you can reorder them however you want and not just reversing the order.
I would do an $.each() to get the elements in the ol, reverse the order then use the $.html() to rewrite the ol
Please see the jquery manual here for an example of this.
Using jquery:
$('.choices-group li').each(function(){
$(this).parent().prepend(this);
});
See jsFiddle
But faster would be to use pure javascript method as:
ObjetNode.insertBefore(NewNode,NodePosition);
I have the following html form, which is generated dynamically:
<ul class="precursorList">
<li>
Precursor Name: <input name="precursorName" type="text">
<ul class="portList">
<li>Portname of precursor: <input name="precursorPort" type="text">
Portname of this: <input name="thisPort" type="text">
</li>
</ul>
</li>
<li>
<li>
Precursor Name: <input name="precursorName" type="text">
<ul class="portList">
<li>Portname of precursor: <input name="precursorPort" type="text">
Portname of this: <input name="thisPort" type="text">
</li>
</ul>
</li>
<li>
</ul>
I want to get the values using jquery, therefore I have defined this loop:
ports = [];
$(".precursorList :input").each(function() {
if(this.name == "precursorName") {
var precursorName_ = this.value
$(".portList :input ").each(function() {
if(this.name == "precursorPort") {
precursorPort_ = this.value;
} else if(this.name == "thisPort") {
ports.push({
filterName : precursorName_,
portNameOfFilter : precursorPort_,
portNameOfThis : this.value
});
}
});
}
});
Unfortunately this function does not work like I want it to work. The following loop $(".portList :input ").each( will always only loop over all elements in portList in the html document. How can I achieve that this loop will only loop over the corresponding portList, for each precursor?
UPDATE: The structure of the html element will stay the same only, the number of inputs will change. But there will only be a portList if a PrecursorElement exist.
id must be a unique field, instead use class to select multiple elements. Also use .live() for dynamically added elements.
EDIT:
If you are using Jquery > 1.7 use .on() instead of .live().
I tried following and it seems that its working
$(".precursorPort").each(function() {
temp = this.name;
$(this).parents(".portList").each(function() {
$(this).parents(".precursorList").each(function() {
alert(temp);
// use temp var and save it in ports
});
});
});
Check this fiddle : http://jsfiddle.net/Ajinkya_Parakh/DR233/
It may not be the best/most efficient but it is one of the working alternative.
An id must be unique in a document. If you want to create a group of similar things, then use a class instead.
I'd do something like this:
<ul id="precursorList">
<li>
Precursor Name1: <input class="precursor" name="precursorName1" id="precursorName1" type="text">
<ul id="portList1">
<li>Portname of precursor1: <input class="precursorPort" name="precursorPort1" id="precursorPort1" type="text">
Portname of this1: <input class="thisPort" name="thisPort1" id="thisPort1" type="text">
</li>
</ul>
</li>
<li>
Precursor Name2: <input class="precursor" name="precursorName2" id="precursorName2" type="text">
<ul id="portList2">
<li>Portname of precursor2 <input class="precursorPort" name="precursorPort2" id="precursorPort2" type="text">
Portname of this2: <input class="thisPort" name="thisPort2" id="thisPort2" type="text">
</li>
</ul>
</li>
</ul>
and then:
ports = [];
$("#precursorList > li").each(function()
{
precursor = $(this).find(".precursor")[0];
precursorPort = $(this).find(".precursorPort")[0];
thisPort = $(this).find(".thisPort")[0];
ports.push({filterName: precursor.value, portNameOfFilter: precursorPort.value, portNameOfThis: thisPort.value});
});
Step back a minute, I think you're overthinking this a bit.
Wrap your dynamic form in <form> tags. Then do a $('form').serialize() No need for crazy loops. Serialize is essentially a built-in, one line version of what you're already trying to do. Of course, serialize works on names so you'll have to have distinct ones (even if it's just name1, name2,etc) ID's must be unique too, so either fix that or drop them.
Simplicity always trumps crazy technical genius.
Fiddle for proof
When I click .getdata, I want to go from .getdata to name=top and read the value of whichever option is selected (in this case it's 0), but I'm having a hard time getting to it. I keep getting undefined.
This is my html. The div class="main" repeats so I can't simply select input[name=top]. It would have to be through traversing the tree to the closest input[name=top]. Can someone get this right? I'm starting to think it's a browser error because I tried different options and all give me undefined.
<div class="main">
<div class="branch">
<div class="element">
<label>top color:</label>
<input type="radio" value="1" name="top">black
<input type="radio" value="0" name="top" checked="checked">white
<input type="radio" value="null" name="top">transparent
</div>
</div>
<div class="controls">
<a class="getdata">get data</a>
</div>
</div>
<div class="main">
....
</div>
$('a.getdata').click(function() {
var val = $(this).closest('.main').find('input[name="top"]:checked').val();
});
Place a click()(docs) event on the <a> element
On a click, use the closest()(docs) method to traverse up to the .main element
Then use the find()(docs) method along with the the attribute-equals-selector(docs) and the checked-selector(docs) to get the checked name="top" radio.
Finally use the val()(docs) method to get its value.
$(".getdata").click(function(){
selectedValue=$(this).parent().prev().children().children("input[name=top]:checked").val();
console.log(selectedValue);
});