Add to/remove from array with link

[Dalixam]

Hi,

I'm trying to add numbers to an array when users click on a link.

More specifically, I have a form with an array like this:

<input type="hidden" name="testarray[]" value="0">

I then have a popup-window where users can click on multiple images to select the images. I want the id of the image to be added to the array if they select that image. (And the id removed from the array if they click the image again. This way the array ends up 2,3,6 or 4,59 (or 0 if no images are selected) when the form is submitted.

Can this be done?

The script I have so far:

function select(id) {    
    
var theElement = window.opener.document.getElementById('testarray');
        
}

But then I'm stuck
Can anyone offer some help?

[SoulScratch]

By ID you obviously mean ID attribute, right? Each image has its own unique ID?

[Dalixam]

By ID you obviously mean ID attribute, right? Each image has its own unique ID?

By id I mean the id it has in the database, but getting this number to the javascript is not what I need help with. I just don't know how to add numbers to an array with javascript

[paul_wilkins]

Typically numbers are added to an array as follows

var myArray = [];
// add numbers
myArray.push(1);
myArray.push(5);
myArray.push(4);
// array is now [1, 5, 4]
 
// Remove the number 5
// The syntax for the splice method is
// Array.splice(start[, howmany[, element1[,element...]]])
var numberToRemove = 5;
for (var i = 0; i < myArray.length; i++) {
    if (myArray[i] === numberToRemove) {
        myArray.splice(i);
    }
}
// Array is now [1, 4]

[Dalixam]

Thanks for the reply. After customizing and testing I came up with this which works

function select(id) {
    
var theElementArray = window.opener.document.getElementById('test');

var myArray=theElementArray.value.split(",");

var x = "";
for (var i = 0; i < myArray.length; i++) {
    if (myArray[i] == id) {
        x = i;
    }
}

if(x != "") {
    myArray.splice(x);
} else {
    myArray.push(id);
}

theElementArray.value = myArray;

Thanks for the help!

[paul_wilkins]

Thanks for the reply. After customizing and testing I came up with this which works

<snip>

So if id is found you want to remove it, and if id is not found you want to add it. When the loop ends, i will be the length of the array, so you can get rid of the that flag value called x and improve the code as follows.

function select(id) {
var theElementArray = window.opener.document.getElementById('test');
var myArray=theElementArray.value.split(",");
 
for (var i = 0; i < myArray.length; i++) {
    if (myArray[i] == id) {
        myArray.splice(i);
        break;
    }
}
 
if(i == myArray.length) {
    myArray.push(id);
}
 
myArray.join(',');
theElementArray.value = myArray;

[Dalixam]

Yes, I see that's a good way to optimize the code.
Thanks

[dimis283]

I want to ask a question that you may say that it is out of topic but I do not thing so.
I am reading now about prototypejs.
I thing this one (and maybe other simiral frameworks) can help you (us) for things like that.
Is not that?
A book.

[paul_wilkins]

Yes, frameworks like prototype can help to abstract away the details of what's happening. Whether that's a good thing or a bad thing, depends on your particular needs.

A concept of how to do this with prototype is as follows:

var myArray = window.opener.document.$('test').value.split(',');
if (myArray.indexOf(id) === -1) {
    myArray.push(id);
} else {
    myArray.without(id);
}
theElementArray.value = myArray.join(',');

However, when using prototype I'd want to steer away from storing the values as strings, and use JSON instead for which prototype provides some more useful tools.