posts array of all element names by class - javascript

I have numerous elements on a page. I am using Jquery toggle to toggle a class.
I need to post a php array containing the names of all the elements that contained that class. (were toggled on).
My first thought was to simply create an form with display:none with a listbox. Everytime the element is toggled the name will be added to the listbox and then when the user clicks next all the values from the listbox are posted to the next page. I am hoping that there might be a cleaner and simpler solution than this.
So, to clarify, I am wanting to detect all the elements that I toggled on, and post those values to another page.
How would I achieve this?
Thanks

You can create an array of all the element names (is this the name attribute, or the id) with the .map() function:
var names = $(".targetClassName").map(function() {
return this.name; //takes the `name` attribute, change to `id` for ID
}).get();

Related

JS - dynamic inserting items into array on button click

So while creating a project I've encounter a problem. I have a container, let's call it container with assigned index, so it looks like container0 etc. Inside that container I have buttons to copy ( and delete ) this particular segment with all it's data. I also have index array to make sure all id's are unique. I have a working project, but I want to solve this particular situation, when I have multiple containers, and in page source containers have indexes like [0,1,5,8,6,7,9,12,10,11]. What I am doing right now is whenever somebody clicks button inside let's say container[7] and user wants to copy that container 3 times I will have [0,1,5,8,6,7,13,14,15,9,12,10,11], and the way I've solved this problem is inside button handler I get id of container like const index = parseInt(e.target.id.match(/\d+/)[0]); and then using querySelector I select which container I want to get data from. What I would like for you to help me figure out, how may I get container Id inside which button was clicked in different, easier way instead of matching id from button ( copy and delete button also have id, which is equal to container id). Also one more thing, I use eventDelegetion to add eventListeners for newly created segments.

How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?

How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?
I have a number of files that are contained in a table, each row containing a checkbox and filename.
Each of these checkbox input elements has a uniquely generated ID which is "Item_" followed by a 5 unique digit number.
Ideally, I'd like to process the state of a checkbox when it the user selects it or deselects it.
If I were to use the following to access when the user clicks on an item from the list, how would jQuery respond to the checkbox set/unset?
$("#Item_" + file_number).some_function_here();
Would jQuery keep track of the elements on the page which have the ID of Item_#### (e.g. Item_100, Item_1234, etc.)? These items would not be dynamic so the page will only contain elements that part of the page when it is loaded, so all the information jQuery needs for the processing is available when the page is first loaded. But I want to avoid generating a processing function for each element in the list to minimize the size of the page and keep the code clean so that the javascript/jquery would be the same across the pages, and only the file items would be changed.
Thank you for any help you can provide.
How does jQuery differentiate between function calls (e.g. on click) when using variable element IDs?
They're stored in a closure inside jQuery's internals. It's not too dissimilar from the following:
const getElements = (selector) => {
const elements = document.querySelectorAll(elements);
return {
someFn() {
// do something with every element in `elements`
}
};
};
For what you're doing, it sounds like you should give each item a class name instead of a separate ID, then add a change listener to all elements with that class. Then, the this inside the listener will refer to the element that was changed:
$('.item').on('change', function() {
console.log(this); // refers to the input
console.log('was just changed to', this.checked);
});
And then you can process the change appropriately, depending on the element and the checkbox state.

How get id of html elements when it generates dynamically?

I create design for image, checkbox and drop-down list.. the image will create dynamically according to number of row..
My question is how can validate which checkbox was checked and which drop down option was selected because all of its have same id and name
First of all welcome to stackoverflow :D
If all of you checkboxes have the same ID it won't work. You said you create them dynamically then try to give them an special identifier like "myid"+i wehreas i being the number of the element (increase it after instantiating the element).
Then your IDs will look like:
myid0
myid1
myid2
...
with all the objects having a different ID it won't be a problem for you to check which checkbox was selected :)

get index of element selected by Document.getElementByID("id_name")

For a page ("Bill4Time"), the Dashboard shows a table for displaying time entries and entering a new time entry but several control elements do not have ID's associated with them. Interestingly enough, the control to add a new time entry line (an icon of a clipboard with a small plus sign in the lower right hand corner) always has the same index number (so I can select it with Document.all("index_no") to add a new time entry. But once you edit that line by entering a new time entry, the control icon changes (to a generic clipboard, like all the other time entries in the table) and the index becomes dynamic -- and there is no id associated with that control. However, I found that the parent element (i.e., the table cell) does have a unique ID which never changes (while it is the most recently added time entry) so currently I go to it (using Document.getElementByID("unique_id").focus()) and then send a {tab} to move over to the control element (and send {enter} to go to the correct details page).
If I could get the index number of the unique_id element, and increment that by one, I could more reliably get to the control I want, so my question is, if one has gotten a DOM element by id, how can one find its index number?
When I search here (or google) I get a lot of results for finding the index of the included elements within the parent, or results based on .selectedIndex and the like, and I suppose I could loop through all the DOM elements until I find the one with ID = unique_id, but there should be a better way to get an index number of a selected element.
TIA,
At least if doing it with IE and AutoHotkey this will give you the index
index := wb.document.getElementByID("unique_id").sourceIndex
But you don't need the index if you have the parent element
element := wb.document.getElementByID("unique_id").childnodes[0]
Also a lot of times elements that don't have an ID often have a Name or Class attribute, both of them can also be used to find the element you need...
You mentioned looping, but I think that may be the way to do it since IDs are unique. Getting a matching element by its ID gives you that element, not an array of elements (like if you matched by class) which would all have an index.
If you know the ID of the table you want to focus on, you can do something like this if you don't want to use jQuery.
//get all the tables
var thisEleArr = document.getElementsByTagName('table');
var indexOfTableIWant;
//loop through the array of tables
for (var i=0;i<thisEleArr.length;i++) {
//if the id of the current table in the loop matches the known id
if (thisEleArr[i].getAttribute('id')==='knownTableID') {
//get the index of it
indexOfTableIWant = i;
}
}
My example using lists: https://jsfiddle.net/ksumarine/ga06n54u/

Affect only the item being clicked, and track unique identifiers?

So I will have a list of items to check off. They could have the same name/attributes but should all have a unique identifier. I want to be able to check them off of a list and have them run a function on themselves that hides them and send and update to the server with the unique id.
I'm trying to figure out where the unique ID should be stored? Should I use it as a class to easily find the item in the dom? What are my other options for tracking this user input on a particular item? The items will be sent from the server initially.
Here is a start, http://jsfiddle.net/QQPtn/1/ trying to figure out best practices for working with this kind of problem. Thanks!
If I'm not wrong there is another option. You can take help of a custom attribute. You can use custom attributes in each image element. Custom attribute can be any user defined name except existing attributes. As an example I can define my own attribute as index="n".
Example:
<img src="..." index="1" class="myimage" />
On click of the image you can read the attribute index as below
Using normal JavaScript
var index = element.getAttribute('index');
Using JQuery
$(".myimage").click(function (s) {
var imgIndex = s.currentTarget.getAttribute('index');
});

Categories

Resources