I have a form with checkboxes.
All of the checkboxes have an attribute called att, which contains several numbers that are separated by commas.
I'd like to create a function that gets a number, goes over all the checkboxes and checks all the checkboxes that their att attribute contains that number.
Can please someone point me at the right direction?
Using jQuery you can do something like
function myfunc(num)
{
$(":checkbox[att!='']").each(function()
{
var i, l, values = $(this).attr("att").split(",");
for (i = 0, l = values.length; i < l; ++i)
{
if (values[i] == num)
{
$(this).attr("checked", "checked");
break;
}
}
});
}
With JQuery you would use the attribute-contains selector to get all elements where an attribute contains a certain value.
$('input[att*="100"]').val('input has 100 in it!');
This loops over all input elements and gives you an array containing the values of att (split using the comma), so I'd add some logic to pick out only checkboxes:
for (var i = 0; i < document.getElementsByTagName('input'); i++)
{
var att_array = document.getElementsByTagName('input')[i].getAttribute('att').split(',');
}
This will get you all inputs with the attribute ATTR and then alerts the val of each of those. You can, of course, do whatever you want with the val when you have it.
$("input[ATTR]").each(function(){
alert($(this).attr("ATTR"))
})
If you want to limit this to checkboxes, change the selector as is shown below
$(":checkbox[ATTR]").each(function(){
alert($(this).attr("ATTR"))
})
Related
What is wrong with the below code? According to linda, getElementsByTagNameis supposed to return an array, so basically it is supposed to work just fine.Please help explaining to me what is going wrong?
var outputs= 0;
function countPasswds(){
var v= document;
d=v.getElementsByTagName("input");
x= d.getAttribute("type");
for (var i=0; i< d.length; i++){
if (x[i] == "password")
outputs++;
}
console.log("Number of Password Fields is: ", outputs);
}
x= d.getAttribute("type");
You are trying to get the type attribute from the document.
You have to check the type attribute of each input, you can't just get it once and reuse it everywhere.
Move your get attribute call inside the for loop and apply it to the element object.
I've fixed it for you, pls try this:
function countPasswds() {
var inputType;
var outputs = 0;
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputType = inputs[i].getAttribute("type");
if (inputType == "password")
outputs++;
}
console.log("Number of Password Fields is: ", outputs);
}
There were many problems with your function.
First of all don't use one character variable names, it makes your code extremly hard to read or understand.
You've setup the for loop for the number of input elements, but inside of the loop, tried to get 'i'-th the value of x.
The main part of the fix was to move the getAttribute function inside of the loop.
It seems that for some reason, I cannot perform:
$(".exampleClass")[0].is(":focus");
It tells me - TypeError: undefined is not a function.
What I am trying to do is grab a few elements with jquery, scan through them, and find which one is focused (so that I can focus the next element in the array programmatically).
var fields = $(".textField");
var selected = false;
for(var j = 0; j < fields.length; j++){
var field = fields[j];
console.log(field);
if(selected){
field.focus();
}else if(field.is(':focus') && !selected ){
selected = true;
}
}
It all works fine until field.is(':focus') Why won't this work?
When you index into the jQuery object with the [ ] operator, you extract the underlying component of the list of matched elements. That component will be a DOM node, and it won't have a .is() method.
If you coded it like
$(".exampleClass").eq(0).is(":focus");
you'd be working with a jQuery object, and you wouldn't have the problem.
I'm doing the following:
$('#clear-button').click(function () {
var clearableFieldArray = $('.clearable-field');
var array = Array.prototype.slice.call(clearableFieldArray);
for (var i = 0; i < 7; i++) {
if (i == 6) {
array[i].val('');
} else {
array[i].val('All');
}
}
});
when I do console.log(array[i]) it prints the correct elements and children, however when I try to access the .val() it keeps returning undefined, why is it doing that
You can wrap $(array[i]) with the jQuery selector because it looks like you are not selecting a jQuery object but a regular DOM object.
if its one of the first 6 elements, its a select, so set the value to "All" which is an option I have, otherwise the 7th element is a text input, so set the val to ""
In this case you can simplify your code without the need for arrays:
$('#clear-button').click(function () {
$('input.clearable-field').val('');
$('select.clearable-field').val('All');
});
I want to select all elements with the css class
.arrow-down
Sorry but i simply dont find the correct answer, for my problem!
I have an javascript code:
document.getElementsByClassName("arrow-down")[0].style.borderTopColor=""+blu+"";
so how do i select not the first but [all] or is there a way to [1;2;3;]??
getElementsByClassName("arrow-down")[all]
getElementsByClassName("arrow-down")[1;2...]
I tried many things but simply dont get it!
Greetings from germany!
You need to iterate over the list of returned results.
var elements = document.getElementsByClassName("arrow-down");
for (var i = 0, len = elements.length; i < len; i++){
elements[i].style.borderTopColor = blu;
}
If you want to only do a specific subset based on the index, then you can add a condition that checks the value of i. I'm also assuming that blu here is a variable you have defined somewhere?
for (var i = 0, len = elements.length; i < len; i++){
if (i === 1 || i === 2 || i === 3){
elements[i].style.borderTopColor = blu;
}
}
Unfortunately, JavaScript does not have a shorthand for accessing a specific subset of array values, or for applying changes to multiple elements at once. That is something that jQuery does automatically for you. For instance, with jQuery you could write this as:
$('.arrow-down').css('borderTopColor', blu);
document.getElementsByClassName("arrow-down") does select all of such elements.
These are returned in a node list (which can be treated as an array), which is why using [0] on that returns the first element.
Loop over the different elements that the expression returns and act on them:
var elements = document.getElementsByClassName("arrow-down");
var elementsNum = elements.length)
for(var i = 0; i < elementsNum; i++)
{
var anElement = elements[i];
// do something with anElement
}
I have about 20 check boxes. When the user selects these and then uses an alternate submit button, I need to change the name of the name/value pair, for the selected inputs.
Why does this function only change the name of every other selected input?
function sub_d()
{
for (i = 0; i < document.checks.OGname.length; i++) //for all check boxes
{
if (document.checks.OGname[i].checked == true)
{
document.checks.OGname[i].name="newname"; //change name of input
}
}
document.checks.submit();
}
The output:
newname
'105'
OGname
'106'
newname
'107'
OGname
'108'
newname
'109'
OGname
'110'
By renaming the first element of the list you have reduced the length of the list by one and deleted the first element. Next time through the loop the previous second element is now the first, and the second is the old third.
I'm no javascript expert, but something along the lines of this might work.
function sub_d()
{
i=0;
while (document.checks.OGname.length > i)
{
if (document.checks.OGname[i].checked="true")
{
document.checks.OGname[i].name="newname";
}else{
i++;
}
}
document.checks.submit();
}
As I said, no warranty or guarantee.
Would be great if you provide a more detailed description of your scenario, but I wish that my answer be useful.
function sub_d()
{
for (i = 0; i < document.checks.OGname.length; i++) //for all check boxes
{
if (document.checks.OGname[i].type == 'CHECKBOX')
if (document.checks.OGname[i].checked)
{
document.checks.OGname[i].name="newname"; //change name of input
}
}
document.checks.submit();
}
I usually manage dom collections in this way: (I don't know if is the best way)
function sub_d()
{
var theInputs = document.checks.getElementsByTagName('input');
for (var i = 0; i < theInputs.length; i++)
{
if (theInputs[i].type == 'CHECKBOX')
if (theInputs[i].checked)
{
theInputs[i].name="newname";
}
}
document.checks.submit();
}
With your guys help I came up with this, seems to work well. Let me know if it can be improved for others to use...
function sub_d()
{
for (i = 0; i < document.checks.OGname.length; i++) //for all check boxes
{
if (document.checks.OGname[i].checked == true)
{
document.checks.OGname[i].name="newname"; //change name of input data so we know it is for other function
//By renaming the first element of the list, we have reduced the length of the list by one
//and deleted the first element. This is why we need to keep i at it's current position after a name change.
i=i-1;
}
}
//When there is only one check box left it's propert length becomes undefined.
//We will need this statement for the last undefined check box not covered in the for loop
//We can no longer index user[0]
document.checks.OGname.name="newname";
document.checks.submit();//submit these checked values to the .exe
}