JQuery to switch option order on a form - javascript

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);

Related

check the radio button when click on the li using javascript

I have radio button
Html code:
<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">
And i have a nav bar
Html code
<ul class="nav">
<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
</ul>
These 2 are conected with the data-cont that have the class of the radio button
I want when i click on the li the correct radio button be checked using javascript
I tried to make it using this code in JavaScript
let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
tabsArray.forEach((ele) => {
ele.addEventListener("click", function (e) {
tabsArray.forEach((ele) => {
ele.classList.remove("active");
});
e.currentTarget.classList.add("active");
document.querySelector(e.currentTarget.dataset.cont).checked = true;
});
});
I try to remove the active class from li and put it on the li where i click then i want the radio button be checked
Any body can help me on this?
the last querySelector is where your code is failing you're not referencing the class for your input it needs to be document.querySelector('.' + e.currentTarget.dataset.cont).checked = true; note the "." prefix
Although that answers your question there is probably more value in pointing out that by changing your html markup to be a little more accessible you can eliminate the need for all of the javascript in your example
e.g.
input:checked + label {
color:Red;
}
<div><input type="radio" id="first" name="bright" checked>
<label for='first'>وزارة الاستثما</label>
</div>
<div>
<input type="radio" id="second" name="bright" >
<label for='second'>وزارة التجارة</label>
</div>
<div>
<input type="radio" id="third" name="bright">
<label for='third'>جهات حكومية اخرى</label>
</div>
<div>
<input type="radio" id="four" name="bright">
<label for='four'>مكتب هندسي</label>
</div>
The use of labels associated with your radio buttons is now significantly more accessible and you can drastically reduce a lot of your markup ( though to be accessible you would need to provide a more meaningful name for for attribute.

target individual checkbox value

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"]');

On click of label add class to previous div, just not working

I'm trying to add a class to a div (.checkbox) when clicking on the label that follows from it. It doesn't seem to be working at all though and I don't know why.
Below is the javascript and the basic form layout that I have set up.
JS
$('#filter ul label').click(function() {
if ($(this).prev('.checkbox').hasClass('checked')) {
$(this).prev('.checkbox').removeClass('checked');
} else {
$(this).prev('.checkbox').addClass('checked');
}
});
HTML
<form id="filter">
<div>
Service <span></span>
<ul>
<li>
<div class="checkbox"></div>
<label for="new-build">
<input type="checkbox" name="new-build" id="new-build">
New Build
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="extensions">
<input type="checkbox" name="extensions" id="extensions">
Extensions
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="refurbishments">
<input type="checkbox" name="refurbishments" id="refurbishments">
Refurbishments
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="fit-out">
<input type="checkbox" name="fit-out" id="fit-out">
Fit Out
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="maintenance">
<input type="checkbox" name="maintenance" id="maintenance">
Maintenance
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="design-build">
<input type="checkbox" name="design-build" id="design-build">
Design & Build
</label>
</li>
<li>
<div class="checkbox"></div>
<label for="listed-building">
<input type="checkbox" name="listed-building" id="listed-building">
Fit Out
</label>
</li>
</ul>
</div>
<input type="submit">
</form>
Any help would be greatly appreciated, I'm assuming it is something really simple that I'm missing completely.
Thank you.
Your solution works perfectly fine. Please make sure that you included jQuery and put your javascript in a
$(document).ready(function() {
});
block.
It seems like the click event is not fired when writing the markup like you did. You can bind your function to the change event of the checkbox instead. This should work as expected:
$('#filter input[type=checkbox]').change(function() {
var $div = $(this).parent().prev('.checkbox');
if ($div.hasClass('checked')) {
$div.removeClass('checked');
} else {
$div.addClass('checked');
}
});
Check Fiddle for demo: http://jsfiddle.net/g3v4F/3/
I think you have a problem with the order of code. At the time your JavaScript code is executed the DOM elements are not there because they come after the JS.
Move the JS behind the HTML or use the jQuery(document). ready(function () {...}) construct (recommended).
http://api.jquery.com/ready/
This worked for me:
$('#filter ul label').click(function() {
var $cb = $(this).prev('.checkbox');
$cb.toggleClass('checked', !$cb.hasClass('checked'));
});
Working JSFiddle
JS should be either below your HTML or wrapped in document.ready
$(function(){
// your JS here
});

close other div when div1 is show and duplicate code pb jquery

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);
});

Undefined variable in array in prototype

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.

Categories