Saturday, October 15, 2005

Tabbed Search v2 (JavaScript)

An alternative javascript file for Tabbed Search. Instead of changing the form action when clicking a table, it changes the action when clicking the submit button, so it does not impact on other possible submit buttons in the form. HTML and CSS pages remain the same.

The script: tabbedsearch.js

// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func)
{
 var oldonload = window.onload;
 if (typeof window.onload != 'function')
 {
  window.onload = func;
 }
 else
 {
  window.onload = function()
  {
   oldonload();
   func();
  }
 }
}
// this sets up the forms for search
// tested and works in IE 5+, Firefox 1.0+
function setupForms(method)
{
 // get all forms and loop through them
 var forms = document.getElementsByTagName("form");
 for(i=0; i<forms.length;i++)
 {
  if(forms[i].id == "")
  {
   forms[i].id = "form" + i;
  }
  var formid = forms[i].id;
  // get list
  var list = forms[i].getElementsByTagName("ul");
  // loop through items in list
  for(j=0; j<list.length;j++)
  {
   //alert(list[j].className);
   if(list[j].className == "formpages")
   {
    var items = list[j].getElementsByTagName("li");
    for(k=0; k<items.length;k++)
    {
     var link = items[k].getElementsByTagName("a")[0];
     if (link)
     {
      if(link.id == "")
      {
       link.id = formid + "Link" + k;
      }
      // this stores the links to the search
      if(forms[i].searchlinkids)
      {
       forms[i].searchlinkids = forms[i].searchlinkids + "," + link.id;
      }
      else
      {
       forms[i].searchlinkids = link.id;
      }
      link.onclick = function()
      { 
       removeLinkClassNames(formid);
       this.className = "active";
       return false;
      };
     }
    }
   }
  }
  // find submit button
  var divs = forms[i].getElementsByTagName("div");
  for(j=0; j<divs.length;j++)
  {
   if (divs[j].className == "searchbox")
   {
    var inputs = divs[j].getElementsByTagName("input");
    for(k=0; k<inputs.length;k++)
    {
     if(inputs[k].type == "submit")
     {
      inputs[k].onclick = function()
      {
       changeFormAction(formid, method);
      }
     }
    }
    break;
   }
  }
 }
}

function removeLinkClassNames(form)
{
 if(typeof(form) == 'string')
 {
  form = document.getElementById(form);
 }
 var f = form.searchlinkids.split(",");
 for (i=0; i<f.length; i++)
 {
  document.getElementById(f[i]).className = "";
 }
}

function changeFormAction(form,method)
{
 if(typeof(form) == 'string')
 {
  form = document.getElementById(form);
 }
 var action = form.action;
 form.oldaction = action;
 // get list
 var list = form.getElementsByTagName("ul");
 // loop through items in list
 for(i=0; i<list.length;i++)
 {
  //alert(list[i].className);
  if(list[i].className == "formpages")
  {
   var items = list[i].getElementsByTagName("li");
   for(j=0; j<items.length;j++)
   {
    var link = items[j].getElementsByTagName("a")[0];
    if (link)
    {
     if(link.className == "active")
     {
      action = link.href;
      break;
     }
    }
   }
  }
 }
 // change action and method
 if(action)
 {
  form.action = action;
 }
 if(method)
 {
  form.method = method;
 }
}



//addLoadEvent(setupForms);
//addLoadEvent(function(){setupForms("post")});
addLoadEvent(function(){setupForms("get")});

Tags: , ,

No comments: