www.webdeveloper.com
Results 1 to 2 of 2

Thread: Create a 'chain' and get data from google spreadsheet

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    6

    Create a 'chain' and get data from google spreadsheet

    This script is a starting place for what I'd like to do, which is to use a drop down to select a 'state', which in turn populates a second drop down with 'names' of representatives from that state, which in turn when a name is selected populates several fields on the page. I'd prefer to pull the data from a google spreadsheet instead of placing it all in the javascript. This is just sample data from a script I found online, where 'apple' could be a 'state' and "red" could potentially be names to populate the second drop down, and 'groups' could be one of several additional fields to be populated.

    Any help is appreciated. You can see what I'm trying to do at http://www.congressionaldebtclock.co...-contribution/ with the spreadsheet being: https://docs.google.com/spreadsheet/...5UTVCdUE#gid=0

    var colors = { apple: "red",
    grape: "purple",
    milk: "white",
    cheese: "yellow",
    chicken: "white",
    beef: "red" };

    // do same thing with this one perhaps:
    var groups = new Array();
    groups["apple"] = "fruit";
    groups["grape"] = "fruit";
    groups["milk"] = "diary";
    groups["cheese"] = "diary";
    groups["chicken"] = "meat";
    groups["beef"] = "meat";

    function printColorAndGroup(select){
    var text = select.options[select.selectedIndex].value;
    document.getElementById('group').value = groups[text];
    document.getElementById('color').value = colors[text];
    }

  2. #2
    Join Date
    Feb 2013
    Posts
    6
    I'd like to use something like this but populate the second drop down from the google spreadsheet:

    http://javascriptkit.com/script/cut183.shtml

    <form name="doublecombo">
    <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option>Technology Sites</option>
    <option>News Sites</option>
    <option>Search Engines</option>
    </select>
    <select name="stage2" size="1">
    <option value="http://javascriptkit.com">JavaScript Kit</option>
    <option value="http://www.news.com">News.com</option>
    <option value="http://www.wired.com">Wired News</option>
    </select>
    <input type="button" name="test" value="Go!"
    onClick="go()">
    </p>

    <script>
    <!--

    /*
    Double Combo Script Credit
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScripts here!
    */

    var groups=document.doublecombo.example.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()

    group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
    group[0][1]=new Option("News.com","http://www.news.com")
    group[0][2]=new Option("Wired News","http://www.wired.com")

    group[1][0]=new Option("CNN","http://www.cnn.com")
    group[1][1]=new Option("ABC News","http://www.abcnews.com")

    group[2][0]=new Option("Hotbot","http://www.hotbot.com")
    group[2][1]=new Option("Infoseek","http://www.infoseek.com")
    group[2][2]=new Option("Excite","http://www.excite.com")
    group[2][3]=new Option("Lycos","http://www.lycos.com")

    var temp=document.doublecombo.stage2

    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    temp.options[m]=null
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    }
    temp.options[0].selected=true
    }

    function go(){
    location=temp.options[temp.selectedIndex].value
    }
    //-->
    </script>

    </form>

    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles