Return to Kroll Design home page

JavaScript Tutorials

 
« Return

dynamic form: Google Trends

Google Trends is a service offered by Google, that for up to 5 specified search keywords, you can see how popular each keyword is. For example, as of February 2009, Facebook is one of the most common seach terms, as is Youtube and Yahoo.

I used JavaScript to dynamically create a form with 50 checkboxes, each checkbox representing a popular Google search term. Check up to 5 boxes, then click the button to run Google Trends. After clicking the button, a new window or tab will open with the Google Trends results. It takes about 30 seconds to run.

Output:

Code:

<script type="text/javascript">
//<![CDATA[
function addPlusSigns(myString)
{
  var outString = "";
  for (myChar=0; myChar<myString.length; myChar++)
  {
    currChar = myString.charAt(myChar);
    if (currChar == " ")
      { outString = outString + "+"; }
    else
      { outString = outString + currChar; }
  }
  return outString;
}

function highlight(myElement)
{
  myString = "document.form1." + myElement + ".checked";
  if (eval(myString))
  { document.getElementById(myElement).style.backgroundColor="yellow"; }
  else
  { document.getElementById(myElement).style.backgroundColor="white"; }
}

function unHighlight()
{
  for (i=0; i<myArray.length; i++)
  {
    myElement = removeBlanks(myArray[i]);
    document.getElementById(myElement).style.backgroundColor="white";
  }
}

function myFunc()
{
  baseUrl = "http://www.google.com/trends?q=";
  for (i=0; i<myArray.length; i++)
  {
     myString = "document.form1." + removeBlanks(myArray[i]) + ".checked";

     if (eval(myString))
     { baseUrl = baseUrl + addPlusSigns(myArray[i]) + "%2C+"; }
  }
newBaseUrl = baseUrl.substring(0,(baseUrl.length - 4));
window.open(newBaseUrl);
}

function newTableCell()
{
  document.write("</td><td>");
}

function removeBlanks(myString)
{
  var outString = "";
  for (myChar=0; myChar<myString.length; myChar++)
  {
    if (myString.charAt(myChar) != " ")
      { outString = outString + myString.charAt(myChar); }
  }
  return outString;
}

function writeCheckbox(i)
{
  document.write("<span class=\"checkbox-style\"><input class=\"body-copy\" type =\"checkbox\" name=\"");
  document.write(removeBlanks(myArray[i]));
  document.write("\" value=\"");
  document.write(myArray[i]);
  document.write("\" onclick=\"highlight(\'");
  document.write(removeBlanks(myArray[i]));
  document.write("\')\">");
  document.write("<label for=\"");
  document.write(removeBlanks(myArray[i]));
  document.write("\">");
  document.write(myArray[i]);
  document.write("</label>");
  document.write("</span><br>");
}

var myArray = new Array(
"boston",
"business",
"california",
"canada",
"car",
"cat",
"chicago",
"city",
"detroit",
"doctor",
"dog",
"england",
"europe",
"facebook",
"food",
"god",
"google",
"health",
"home",
"house",
"insurance",
"iphone",
"itunes",
"japan",
"jesus",
"jobs",
"land",
"los angeles",
"love",
"man",
"microsoft",
"movies",
"mp3",
"msn",
"music",
"myspace",
"new york",
"news",
"obama",
"pc",
"school",
"sports",
"texas",
"tv",
"war",
"weather",
"web",
"world",
"yahoo",
"youtube");

//]]>
</script>
</span>

<form name="form1" action="javascript:myFunc()" method="get">
<table cellpadding="5" cellspacing="0">
<tr>
<td>

<script>
//<![CDATA[
for (i=0; i<myArray.length; i++)
{
   if (i%10 === 0)
   { newTableCell(); }

   writeCheckbox(i);
}
//]]>
</script>

</td>
</tr>
</table>
<input type="reset" value="Clear Form" onclick="unHighlight()">
<input type="submit" value="Run Google Trends">
</form>


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM