I've got a page with bunch of drop downs and each drop down has a button next to it. When the page initially loads I want all the buttons to be disabled and if there is a change to a specific drop down then its corresponding button shall be enabled.
I've got the following code down for this but I need to know how to loop through all the drop downs and buttons so I can generalize it.
$(document).ready(function () {
//disable all buttons
function disableAllButtons () {
$(':input[type=button]').attr("disabled", "true");
}
disableAllButtons();
//enable button when drop down changes
$(':input[name=sNewPKvalue1]').focus(function() {
disableAllButtons();
$(':input[name=Update0]').removeAttr("disabled");
})
//enable button when drop down changes
$(':input[name=sNewPKvalue2]').focus(function() {
disableAllButtons();
$(':input[name=Update1]').removeAttr("disabled");
})
////.....question?
});
Question
If I have 12 dropdowns and 12 buttons
How do I loop through all the drop downs with name sNewPKvalue[1-12] and all the buttons with name Update[0-11]
I would not recommend a loop. Just use a selector that selects the elements you want and perform the appropriate action. My first thought is to assign a CSS class to the buttons and drop down lists you are talking about. Then you can simply do something like this:
$('.dropDown').focus(function(){
$(".ddlButton").attr("disabled", "true");
$(this).closest('.ddlButton').removeAttr("disabled");
});
I would do something like:
$.each([1, 12], function(index, value) {
var valmin = val - 1;
$(':input[name=sNewPKvalue'+value+']').focus(function() {
disableAllButtons();
$(':input[name=Update'+valmin+']').removeAttr("disabled");
})
});
I didn't test this one, but you should get the idea ;)
You can do it that way.
for (var i = 0; i < 12; i++)
{
$(':input[name=sNewPKvalue'+(i+1)+']').focus(function() {
disableAllButtons();
$(':input[name=Update'+i+']').removeAttr("disabled");
})
}
Or
$(':input[name^=sNewPKvalue]').focus(function() {
disableAllButtons();
$(':input[name=Update'+(Number(this.name.match(/[0-9]+/))-1)+']').removeAttr("disabled");
})
What you could do is to make a for loop.
for(var i = 1; i <= 12; i++) {
$("select[name='sNewPKvalue"+i+"']").doSomething();
}
for(var i = 1; i <= 11; i++) {
$(":button[name='Update"+i+"']").doSomething();
}
Related
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
when user click in logout option under home window close.
this is Demo:https://jsfiddle.net/ov43ebko/1/
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I hope that this is what you wanted to achieve.
1. to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
For this, have given pointer-events:none to disable li tags as they can't be disabled using attribute disabled.
$('.css,.jscript,.jquery').css('pointer-events', 'none');
And then enabled it by setting css back to all.
$(".field").blur(function() {
$('.css,.jscript,.jquery').css('pointer-events', 'all');
c1();
});
2. to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
I may have misunderstood this point but here is what I think you wanted. Have checked first parameter value and accordingly appended the second parameter value in ul under drop down menu.
if (parseInt(removed1[0]) == 1) {
$(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
$(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
$(".jscript ul").append($("<li></li>").text(removed1[1]));
}
Please refer this fiddle.
I am trying to have originally just one drop down menu when a website loads. Lets say that drop down menu only has two options "A" and "B". If the user selects option "A" I want another drop menu then to appear on the website (just below the original). If the user selects option "B" I want a different menu to appear below the original. I am also using PHP to make things even more complicated. Can anyone guide me on how I can accomplish this?
Modify the two dropdowns with attribute style="display:none". In your javascript function you would have an event registered that based on the SelectedIndex you would choose which dropdown element to remove the style="display:none" from.
This should do the work :
$("#drop").change(function() {
if( $('#drop option:selected').val() == "A") {
//Do what you want
}
else if ( $('#drop option:selected').val() == "B") {
//Do what you want
}
});
I don't know your level in js, if you need more explanations, please let me know.
Here's an example of manipulating the classes using native JavaScript. It could be cleaner, but it shows how you can check agains what classes exist in order to set CSS behaviour.
var cont = document.body.appendChild(document.createElement('div'));
cont.className = 'row';
for (var i = 0; i < 3; i++ ) {
var menuitem = cont.appendChild(document.createElement('div'));
menuitem.className = 'col';
var internal = menuitem.appendChild(document.createElement('div'));
internal.appendChild(document.createTextNode('item'+ (i + 1)));
(internal.attachEvent) ?
internal.attachEvent('onclick', function () {
for (var j = 0; j < cont.children.length; j++){
if (cont.children[j].className === 'col active') {
cont.children[j].className = 'col';
}
};
this.parentElement.className = 'col active';
}) :
internal.addEventListener('click', function () {
for (var j = 0; j < cont.children.length; j++){
if (cont.children[j].className === 'col active') {
cont.children[j].className = 'col';
}
};
this.parentElement.className = 'col active';
}, false);
};
I have a form with two select dropdowns. The first is opening times and the second is closing times. So When the user selects a opening time the closing time cannot be earlier than this.
My Jquery instead disables all the second drop down values instead of only the times earlier as can be seen here: JSFiddle.
$('#open').change(function(){
if($('#close').val()<$('#open').val()){
$('#close').prop('disabled', true);
};
})
How can I get the behaviour I want?
Try this (here is the updated jsfiddle):
$('#open').change(function(){
var that = $(this);
$('#close option').each(function() {
if($(this).val() < that.val()) {
$(this).prop('disabled',true);
} else {
$(this).prop('disabled',false);
}
});
});
It works on Chrome 36, but not on Firefox (haven't tested any browsers besides those two).
Since this behavior is unreliable, you might try dynamically adding options to the second select element based on whatever is chosen in the first select element.
EDIT
See this jsfiddle based on your original fiddle. It will let you dynamically populate the second select element.
var vals = ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.15'];
for(var i = 0; i<vals.length; i++) {
$('#open').append('<option val="'+vals[i]+'">'+vals[i]+'</option>');
}
$('#open').change(function(){
$('#close').html('');
for(var i = 0; i<vals.length; i++) {
if(vals[i] >= $(this).val()) {
$('#close').append('<option>'+vals[i]+'</option>');
}
}
}).change();
Most browsers do not allow the disabling of individual <option>s in a <select>.
I would fill the second <select> whenever the first is changed.
I have this JSFiddle where I am trying to make it so that the items in an unordered list are visible only if the option selected in a drop down matches their class. List items may have multiple classes, but so long as at least one class matches, the item should be made visible.
The Javascript looks like this:
function showListCategories() {
var selection = document.getElementById("listDisplayer").selectedIndex;
var unHidden = document.getElementsByClassName(selection);
for (var i = 0; i < unHidden.length; i++) {
unHidden[i].style.display = 'visible';
}
};
The idea is that it gets the current selection from the drop down, creates an array based on the matching classes, then cycles through each item and sets the CSS to be hidden on each one.
However, it's not working. Can anyone tell me where I'm going wroing?
Note that I haven't yet coded the "show all" option. I think I'll probably be able to figure that out once I have this first problem solved.
In your fiddle change load script No wrap - in <head>.
Just change your function like following
function showListCategories() {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
//above code to reset all lis if they are already shown
var selection = document.getElementById("listDisplayer").value;
lis = document.getElementsByClassName(selection);
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'block';
}
};
and in css it should be none not hidden
.cats, .rats, .bats {
display: none;
}
If you want to show all li when showAll is selected, add all classes to all lis.
You have a few things going on. First, your fiddle is not setup correctly, if you open the console you'll see:
Uncaught ReferenceError: showListCategories is not defined
This means that the function doesn't exist at the point you attach the event or that the function is out of scope, because by default jsFiddle will wrap your code in the onLoad event. To fix it you need to load the script as No wrap - in <body>.
Second, there's no such thing as a display:visible property in CSS. The property you want to toggle is display:none and display:list-item, as this is the default style of <li> elements.
Now, to make this work, it is easier if you add a common class to all items, let's say item, that way you can hide them all, and just show the one you want by checking if it has a certain class, as opposed to querying the DOM many times. You should cache your selectors, it is not necessary to query every time you call the function:
var select = document.getElementById('listDisplayer');
var items = document.getElementsByClassName('item');
function showListCategories() {
var selection = select.options[select.selectedIndex].value;
for (var i=0; i<items.length; i++) {
if (items[i].className.indexOf(selection) > -1) {
items[i].style.display = 'list-item';
} else {
items[i].style.display = 'none';
}
}
}
Demo: http://jsfiddle.net/E2DKh/28/
First there is no property in Css like display:hidden; it should be display: none;
here is the solution please not that i am doing it by targeting id finished
Js function
var selection = document.getElementById("listDisplayer");
var list = document.getElementsByTagName('li');
selection.onchange = function () {
var value = selection.options[selection.selectedIndex].value; // to get Value
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf(value) > -1) {
list[i].style.display = "list-item";
} else {
list[i].style.display = "none"
}
}
}
css Code
.cats, .rats, .bats {
display: none;
}
JSFIDDLE
You have many things wrong in your code and a wrong setting in the jsFiddle. Here's a working version that also implements the "all" option:
Working demo: http://jsfiddle.net/jfriend00/5Efc5/
function applyToList(list, fn) {
for (var i = 0; i < list.length; i++) {
fn(list[i], list);
}
}
function hide(list) {
applyToList(list, function(item) {
item.style.display = "none";
});
}
function show(list) {
applyToList(list, function(item) {
item.style.display = "block";
});
}
function showListCategories() {
var value = document.getElementById("listDisplayer").value;
var itemList = document.getElementById("itemList");
var items = itemList.getElementsByTagName("li");
if (value === "all") {
show(items);
} else {
// hide all items by default
hide(items);
show(itemList.getElementsByClassName(value));
}
}
Changes made:
You have to fetch the .value of the select to see what the value was of the option that was picked. You were using the selectedIndex which is just a number.
A common technique for displaying only a set of objects is to hide all of them, then show just the ones you want. Since the browser only does one repaint for the entire operation, this is still visually seamless.
When finding items that match your class, you should be searching only the <ul>, not the entire document. I added an id to that <ul> tag so it can be found and then searched.
To save code, I added some utility functions for operating on an HTMLCollection or nodeList.
Tests for the "all" option and shows them all if that is selected
Changed the jsFiddle to the Head option so the code is available in the global scope so the HTML can find your change handler function.
Switched style settings to "block" and "none" since "visible" is not a valid setting for style.display.
I have large tables being generated and each row has a checkbox, class "chcktbl".
In the table header, there is a Select All checkbox, class "chckHead".
The select/deselect all function works fine, as does the count of selected charts I have displayed in the table heading.
The function to enable shift+click capability to select a range of checkboxes also works, but in its current format, only selects 10 checkboxes before generating an error message in a popup window:
"Stop running this script? A script on this page is causing your web browser to run slowly. If it continues to run, your computer might become unresponsive."
<script type=text/javascript>
//select all button
$('#chckHead').click(function() {
if (this.checked === false) {
$('.chcktbl:checked').attr('checked', false);
}
else {
$('.chcktbl:not(:checked)').attr('checked', true);
}
countSelected();
});
//count number of boxes checked
function countSelected() {
var numCharts = $('input.chcktbl:checked').length;
$('#numCharts').html(numCharts);
}
//SHIFT+Click to select a range of checkboxes:
// this variable stores the most recently clicked checkbox
// it is used for shift-clicks
var lastClickedBox = 0;
// the checkbox functionality is default to the browser
$('.chcktbl').click(function(event) {
var clickedBox = $('.chcktbl').index(event.target);
if(event.shiftKey) {
setCheckboxes(lastClickedBox, clickedBox);
};
lastClickedBox = clickedBox;
countSelected();
});
// sets all the checkboxes between the specified indices to true
function setCheckboxes(end, start) {
if(start > end) {
var temp = start;
start = end;
end = temp;
};
for(var i = start; i < end; i++) {
$('.chcktbl').eq(i).prop('checked', true);
};
countSelected();
};
</script>
This is a really common feature for selecting a range of items with one click, but I can't find an efficient way to do it. If anyone knows a better way of approaching this or can spot some inefficiency in the code then please let me know.
How about using jquery nextUntil?
I didn't actually test this but this should give you the basic idea and it removes the for loop. I created similar functionality to this before using nextUntil/prevUntil and never got an unresponsive page.
function setCheckboxes(end, start) {
if(start > end) {
var temp = start;
start = end;
end = temp;
};
$('.chcktbl').eq(start).nextUntil(':eq('+(end+1)+')').add().prop('checked', true);
countSelected();
};
I tried you code and it worked well for me. You might want to try this jquery plugin
https://gist.github.com/DelvarWorld/3784055