Andrew found this code on the product pages of a fairly popular automotive e-commerce website. It's called whenever an 'attribute' of a product (size, color, etc.) is selected or changed by the user.

The main focus of this code is to update a concatenation of the values of all currently selected attributes which are stored in a hidden form input field. Once it has done that, it hands off to another function to make an AJAX request with this concatenated value as a parameter.

Sounds simple, right? Well, it is, assuming you've ever heard of basic JavaScript concepts like arrays, loops and accessing an object's properties as if it were a keyed array. However, if you haven't, your code might take the long way around.

var ao0, ao1, ao2, ao3, ao4, ao5, ao6, ao7, ao8, ao9; function updateAttrib(node, pg, index){

  var j;
  var aa = document.ProductForm.attribs.value;
  var attribs = aa.split("@");

  if(index == 0){
    var a = document.ProductForm.attrib0.value;
    var as = a.split("~");

    if(a == 'select'){
      var io = aa.indexOf(ao0);
      if(io != -1)
        aa = aa.replace(ao0 + "@", '');
    }else{
      var found = false;
      for(j = 0; j < attribs.length; j++){
        var split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao0 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao0 = a;
    }
  }else if(index == 1){
    a = document.ProductForm.attrib1.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao1);
      if(io != -1)
        aa = aa.replace(ao1 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao1 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao1 = a;
    }
  }else if(index == 2){
    a = document.ProductForm.attrib2.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao2);
      if(io != -1)
        aa = aa.replace(ao2 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao2 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao2 = a;
    }
  }else if(index == 3){
    a = document.ProductForm.attrib3.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao3);
      if(io != -1)
        aa = aa.replace(ao3 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao3 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao3 = a;
    }
  }else if(index == 4){
    a = document.ProductForm.attrib4.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao4);
      if(io != -1)
        aa = aa.replace(ao4 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao4 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao4 = a;
    }
  }else if(index == 5){
    a = document.ProductForm.attrib5.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao5);
      if(io != -1)
        aa = aa.replace(ao5 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao5 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao5 = a;
    }
  }else if(index == 6){
    a = document.ProductForm.attrib6.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao6);
      if(io != -1)
        aa = aa.replace(ao6 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao6 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao6 = a;
    }
  }else if(index == 7){
    a = document.ProductForm.attrib7.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao7);
      if(io != -1)
        aa = aa.replace(ao7 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao7 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao7 = a;
    }
  }else if(index == 8){
    a = document.ProductForm.attrib8.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao8);
      if(io != -1)
        aa = aa.replace(ao8 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao8 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao8 = a;
    }
  }else if(index == 9){
    a = document.ProductForm.attrib9.value;
    as = a.split("~");

    if(a == 'select'){
      io = aa.indexOf(ao9);
      if(io != -1)
        aa = aa.replace(ao9 + "@", '');
    }else{
      found = false;
      for(j = 0; j < attribs.length; j++){
        split = attribs[j].split("~");
        if(split[0] == as[0]){
          aa = aa.replace(ao9 + "@", a + "@");
          found = true;
          break;
        }
      }

      if(!found)
        aa = aa + a + "@";
      ao9 = a;
    }
  }

  document.ProductForm.attribs.value = aa;
  var image = document.ProductForm.iid.value;

  var q = document.ProductForm.quantity.value;
  doAjax("/Product.do?method=prodAttrib&n=" + node + "&g=" + pg + "&a=" + aa + "&i=" + image + "&q=" + q + "&uid=" + new Date().getTime(), setProdAttrib); }

Here's to hoping that at least their server-side stuff isn't hard-coded to 10 attributes per product...

[Advertisement] BuildMaster is more than just an automation tool: it brings together the people, process, and practices that allow teams to deliver software rapidly, reliably, and responsibly. And it's incredibly easy to get started; download now and use the built-in tutorials and wizards to get your builds and/or deploys automated!

http://thedailywtf.com/articles/a-perfect-10