Get value of items from list using javascript - javascript

I have this code :
<script>
function getgroup(){
var i=0;
var total=document.getElementById("selectedOptions").length;
while (i<total)
{
var group=document.getElementById("selectedOptions").value;
var group2=group.substring(2);
alert(group2);
i++;
}
}
</Script>
I want to loop inside the list and get the value of each item in the list.
By using this code I am getting only the value of the first item only.
Any help please?

i think u are using getElementById() method and by specification the ids of elements should be unique so the length will always be one. try adding a class and use getElementsByClass()

You are assigning the value of the select element to the group variable. You need to loop through the options instead:
group = document.getElementById("selectedOptions").options[i].value;

Related

how to save values of select options in javascript using e.target.value

I gave some options some values in html and I want to save these values in a js var and I wrote the following line but it didn't work
for (let node of document.getElementsByClassName('op.e.target.value')) {
values.push(node.value);
}
(where op is the class given to all the values)
Firstly, getElementsByClassName accepts class names as its argument only, not a function name in a string
When you're using getElementsByClassName you're storing an array of html elements, so to get the values of each you would need to for loop through it.
var values1 = document.getElementsByClassName('op');
var values = [];
for (let node of values1) {
values.push(node.value);
}

Filtering through a list of JQuery selected items

I am in a situation where I haven't found a selector or a selector function that quite does what I would like it to do.
Therefore I am trying to filter the list to contain only the items I would like it to.
I have a selector
var html = $(".foo .foobar")
This returns what I wanted it to.
Then I have a for loop that loops through those selected items and identifies the ones I want to keep in that list.
However, I need to keep the modified list the same type as a selector so that I can perform jquery actions to them later.
how do I create a copy of the 'html' variable (or a filtered original) but with only the desired rows that were found in the function (Keeping it still in a state as if it was a selector itself)?
Later I have an 'each' loop that begins like this:
html.each(function(i, el) {
$(this).replaceWith(tempArr[i]);
I am trying to achieve a result where 'html.each' has 'html' as the modified list previously selected.
Thanks.
// Update
var htmlTemp;
for (var primaryCounter = 0, secondryCounter = 0; primaryCounter < htmlTemp.length; primaryCounter++) {
if (firstFound) {
secondryCounter++;
if (secondryCounter % columnCount === 0) {
html.push(htmlTemp[primaryCounter]);
}
} else {
if (primaryCounter === currI) {
html.push(htmlTemp[primaryCounter]);
firstFound = true;
}
}
}
Above is the function including the logic that I wanted to use (Which isn't going to run). Is there a way with 'filter' possibly where I can call this function and instead of 'push()' just include at these indexes found? Thanks.
Assuming html as an array, you can use html.filter(callbackFunc) to get a new list every time.
Check this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

jQuery : How do i select an array using jquery selector and remove its contents?

var requiredFields = [1,3,5,7];
I am adding my required fields in an array. When i move to next page, i have to empty this array for new set of values. So I want to select this array using jquery and empty the array. Kindly advice.
This should work:
requiredFields = [];

Change the div's in another html page

still learning some javascript here, got done other things but now the final and most important part of it.
I have two html pages - one of which uses javascript to dynamically add text-fields (and to remove them of course) (genmain.html) and the other one where the text field input should go(table.html).
So i have already created a function to retrieve the array of values.
function getElementArray(divName){
var names = document.getElementsByName("namefield");
}
The variable names is an array and it has all the values from fields.
The problem is I would like to set these values from array to the values of another div on the page. After some searching i understood that it could be done with 'id'-s but i'm not that sure and don't completely understand how.
Let's say i have a lot of div's on another page (table.html) but some of them have id="MAIN". I would like to change the value inside of the div
For example
<div id="MAIN">THIS PART I WANT TO CHANGE</div>
Javascript is not part of my school system and i've done CodeAcademy tutorials and that's the most i've got about this, I hope you guys can help with my issue.
The variable names is an array and it has all the values from fields.
function getElementArray(divName){
var names = document.getElementsByName("namefield");
}
Nope, you've only got reference to the elements here. You've not got the value yet.
You can get the values by iterating through the names Nodelist array and use names[i].value
The problem is I would like to set these values from array to the
values of another div on the page
If it's going to be in same page, then use innerHTML or textContent property of the DOM to assign the value.
document.getElementById("MAIN").textContent= names[1].value;
Just for demo purpose am using names[1] here so it will load the second input value.
Let's say i have a lot of div's on another page (table.html) but some
of them have id="MAIN". I would like to change the value inside of the
div
Once you move to another page, the javascript state will be lost. So you wont have access to names inside that page.
Either you must store the values into localStorage and retrieve in next page.
Else add the values to query string of your URL and retrive it there.
Edit: Update based on comments
Let us assume you have var names = document.getElementsByName("namefield"); so to store the values inside localStorage.
var myValues = [],
names = document.getElementsByName("namefield");
for(var i = 0; i < names.length; i++) {
myValues.push(names[i].value);
}
localStorage.myValues = JSON.stringify(myValues);
Now if your next page, Iinside window.onload event:
window.onload = function() {
var myValues = localStorage.getItem("myValues") ? JSON.parse(localStorage.getItem("myValues")) : [],
divElements = document.querySelectorAll("#MAIN");
for(var i =0; i < myValues.length; i++) {
divElements[i].textContent = myValues[i];
}
}
If you want to set or change the contents of an element, you can use the innerHTML property.
So in your case, document.getElementById("MAIN").innerHTML = "Whatever you want";
For the record, names in your example technically isn't an array, but a NodeList. See https://developer.mozilla.org/en/docs/Web/API/NodeList#Why_is_NodeList_not_an_Array.3F.

Remove element from jQuery object

I have a jQuery object that is created via jQuery .find() as seen below...
var $mytable= $('#mytable');
var $myObject = $mytable.find("tbody tr");
This works great and creates a jQuery object of all the tr elements in the tbody. However, as I'm looping over the data, I need to be able to remove parts of the object as I go. For instance, if the above call returns a jQuery object named $myObject with a length of 10, and I want to remove the index 10, I thought I could just do $myObject.splice(10,1) and it would remove the element at index 10. However this doesn't seem to be working.
Any ideas why? Thank you!
UPDATE
I basically just want to be able to remove any element I want from $myObject as I loop through the data. I know it's zero based (bad example above I guess), was just trying to get my point across.
UPDATE
Okay, so I create the object using the find method on the table and at it's creation it's length is 24. As I loop over the object, when I hit an element I don't want I tried to use Array.prototype.splice.call($rows,x,1) where x represents the index to remove. Afterwards when I view the object in the console, it still has a length of 24.
Use .not() to remove a single element, then loop through the jQuery object at your leisure:
var $myObject = $mytable.find('tbody tr').not(':eq(9)'); // zero-based
http://jsfiddle.net/mblase75/tLP87/
http://api.jquery.com/not/
Or if you might be removing more than one:
var $myObject = $mytable.find("tbody tr:lt(9)");
http://jsfiddle.net/mblase75/9evT8/
http://api.jquery.com/lt-selector/
splice is not part of the jQuery API, but you can apply native Array methods on jQuery collections by applying the prototype:
Array.prototype.splice.call($myObject, 9, 1); // 0-index
You can also use pop to remove the last item:
Array.prototype.pop.call($myObject);
This should also give you a correct length property.
splice is an array method, not a jQuery object method.
Try slice
Javascript uses zero-based arrays. This means that the final item in the array (i.e. the 10th item) will be at index 9.
$myObject[9]
So you need something like this:
$myObject.splice(9, 1);
This will remove the element from your existing array, and also return it.
You could also use filter :
var $myObject = $mytable.find("tbody tr").filter(':lt(9)');
You can use .remove to remove an element from the DOM.
So to remove the element at index 9 of the $myObject array, use:
$myObject.eq(9).remove();
If you want to keep the element that you are removing, you can also do:
var removedElement = $myObject.eq(9);
removedElement.detach();

Categories