Merging arrays in JavaScript not working

Question

When I try var a = ar_url2.concat(ar_desc2); to join my arrays into one it returns null. I'm sure it's trivial but I spent a few hours stuck on this now and an explanation as why this is happening would be great. In my code bellow I tried while(ar_url2.length)a.push(ar_url2.shift()); and it returns same null...

  function agregar() {

    var i = 0,
        textarea;
    var ar_desc = [];
    while (textarea = document.getElementsByTagName('textarea')[i++]) {
        if (textarea.id.match(/^desc_([0-9]+)$/)) {
            ar_desc.push(textarea.id);
        }
    }

    var desc_count_demo = document.getElementById('desc_count').value;
    var desc_count = desc_count_demo - 1;

    i = 0;
    var ar_desc2 = [];
    var campo = null;
    while (i <= desc_count) {

         campo = document.getElementById(ar_desc[i]).value;
        ar_desc2[ar_desc[i]] = campo;
        i++;
    }


    i = 0;
        var input;
    var ar_url = [];
    while (input = document.getElementsByTagName('input')[i++]) {
        if (input.id.match(/^url_([0-9]+)$/)) {
            ar_url.push(input.id);
        }
    }

    var url_count_demo2 = document.getElementById('url_count').value;
    var url_count2 = url_count_demo2 - 1;

   i = 0;
    var ar_url2 = [];
    while (i <= url_count2) {

         campo = document.getElementById(ar_url[i]).value;
        ar_url2[ar_url[i]] = campo;
        i++;
    }


  //  var a = Array.prototype.concat.call(ar_url2, ar_desc2);
     while (ar_url2.length) a.push(ar_url2.shift());

    function url(data) {
        var ret = [];
        for (var d in data)
        ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
        return ret.join("&");

    }
  window.open('alta1.php?'+url(a));
}

EDIT: If I pass to function url(ar_url2) or url(ar_desc2) the returned values in the URL are

http://localhost/proj1/alta1.php?url_0=inpit&url_1=input

and

 http://localhost/proj1/alta1.php?desc_0=input&desc_1=input

But still cannot merge both into one...

Answer 1

One thing I see is your ar_url Array is filled by:

while(input=document.getElementsByTagName('input')[i++]){
  if(input.id.match(/^url_([0-9]+)$/)){
    ar_url.push(input.id);
  }
}

Since you the putting the whole id in the array, it will be filled with things like: 'url_0' , 'url_1' , 'url_2' , etc...

Later you do:

  ar_url2[ar_url[i]] = campo;

When you index into ar_url , you get out the 'url_XXX' strings. That means you are setting the 'url_XXX' properties on ar_url2 instead of filling in the elements of the array.

Try changing your second loop to:

while(input=document.getElementsByTagName('input')[i++]){
  var result;
  if(result = input.id.match(/^url_([0-9]+)$/)){
    ar_url.push(+result[1]);
  }
}

To use the value captured in the ([0-9]+) portion of the RegExp instead of the entire 'url_XXX' string.