SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add to/remove from array with link

    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:
    HTML Code:
    <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:

    Code:
    function select(id) {    
        
    var theElement = window.opener.document.getElementById('testarray');
            
    }
    But then I'm stuck
    Can anyone offer some help?

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By ID you obviously mean ID attribute, right? Each image has its own unique ID?

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Typically numbers are added to an array as follows

    Code Javascript:
    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]
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. After customizing and testing I came up with this which works

    Code:
    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!

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Dalixam View Post
    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.

    Code Javascript:
    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;
    Last edited by paul_wilkins; Feb 14, 2008 at 13:39.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2000
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I see that's a good way to optimize the code.
    Thanks

  8. #8
    SitePoint Guru
    Join Date
    Mar 2006
    Posts
    701
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    prototype

    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.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •