www.webdeveloper.com
Results 1 to 4 of 4

Thread: Dropdown list tutorial for dum(me)s

  1. #1
    Join Date
    Apr 2008
    Location
    utah
    Posts
    15

    Dropdown list tutorial for dum(me)s

    I generated a dropdown list using a program I found on a website..
    It turned out ok,,, but I have no idea what to do with it.
    Yes I am a 77 year old geek, and I want to know how to create some
    activity when someone clicks on a choice.. I would like to be able
    to identify the users location while he pages through my site..
    So if someone selects USA and then KANSAS how am I supposed to know
    and create some action.. Perhaps set a cookie on so I will not continue
    to ask where he/she is located. Here is what I have now..
    And keep in mind, I generated this code, I have no idea what it is doing, I know the dropdown list works...

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--Begin JavaScript

    function setList(f) {
    secondlist=eval("'"+f.elements['list1'].options[f.elements['list1'].selectedIndex].text+"'");
    f.elements['list2'].options.length=0;
    size=eval("lists['"+secondlist+"'].length");
    for(i=0;i<size;i++) {
    newval=eval("lists['"+secondlist+"'][i]");
    f.elements['list2'].options[i]=new Option(newval);
    };
    f.elements['list2'].selectedIndex=0;
    };
    lists=new Array();
    lists['USA'] = new Array();
    lists['USA'][0]="Alabama(AL)";
    lists['USA'][1]="Alaska(AK)";
    lists['USA'][2]="Arizona(AZ)";
    lists['USA'][3]="Arkansas(AR)";
    lists['USA'][4]="California(CA)";
    lists['USA'][5]="Colorado(CO)";
    lists['USA'][6]="Connecticut(CT)";
    lists['USA'][7]="Deleware(DE)";
    lists['USA'][8]="District of Columbia(DC)";
    lists['USA'][9]="Florida(FL)";
    lists['USA'][10]="Georgia(GA)";
    lists['USA'][11]="Hawaii(HI)";
    lists['USA'][12]="Idaho(ID)";
    lists['USA'][13]="Illinois(IL)";
    lists['USA'][14]="Indiana(IN)";
    lists['USA'][15]="Iowa(IA)";
    lists['USA'][16]="Kansas(KS)";
    lists['USA'][17]="Kentucky(KY)";
    lists['USA'][18]="Louisiana(LA)";
    lists['USA'][19]="Maine(ME)";
    lists['USA'][20]="Maryland(MD)";
    lists['USA'][21]="Massachusetts(MA)";
    lists['USA'][22]="Michigan(MI)";
    lists['USA'][23]="Minnisota(MN)";
    lists['USA'][24]="Mississippi(MS)";
    lists['USA'][25]="Missouri(MO)";
    lists['USA'][26]="Montana(MT)";
    lists['USA'][27]="Nebraska(NE)";
    lists['USA'][28]="Nevada(NV)";
    lists['USA'][29]="New Hampshire(NH)";
    lists['USA'][30]="New Jersey(NJ)";
    lists['USA'][31]="Mew Mexico(NM)";
    lists['USA'][32]="New York(NY)";
    lists['USA'][33]="North Carolina(NC)";
    lists['USA'][34]="North Dakota(ND)";
    lists['USA'][35]="Ohio(OH)";
    lists['USA'][36]="Oklahoma(OK)";
    lists['USA'][37]="Oregon(OR)";
    lists['USA'][38]="Pennsylvania(PA)";
    lists['USA'][39]="Rhode Island(RI)";
    lists['USA'][40]="South Carolina(SC)";
    lists['USA'][41]="South Dakota(SD)";
    lists['USA'][42]="Tennesee(TN)";
    lists['USA'][43]="Texas(TX)";
    lists['USA'][44]="Utah(UT)";
    lists['USA'][45]="Vermont(VT)";
    lists['USA'][46]="Virginia(VA)";
    lists['USA'][47]="Washington(WA)";
    lists['USA'][48]="West Virginia(WV)";
    lists['USA'][49]="Wisconsin(WI)";
    lists['USA'][50]="Wyoming(WY)";
    lists['USA'][51]="Puerto Rico(PR)";


    lists['CANADA'] = new Array();
    lists['CANADA'][0]="Alberta(AB)";
    lists['CANADA'][1]="British Columbia(BC)";
    lists['CANADA'][2]="Manitoba(MB)";
    lists['CANADA'][3]="New Brunswick(NB)";
    lists['CANADA'][4]="Newfoundland(NF)";
    lists['CANADA'][5]="Nova Scotia(NS)";
    lists['CANADA'][6]="Ontario(ON)";
    lists['CANADA'][7]="Prince Edward Island(PE)";
    lists['CANADA'][8]="Quebec(PQ)";
    lists['CANADA'][9]="Saskatchewan(SK)";


    lists['MEXICO'] = new Array();
    lists['MEXICO'][0]="Mexico";


    lists['INTERNATIONAL'] = new Array();
    lists['INTERNATIONAL'][0]="International";


    //End JavaScript-->
    </SCRIPT>
    <BODY BGCOLOR=WHITE onLoad="setList(document.listsform)">

    <FORM NAME="listsform">
    <SELECT NAME="list1" onChange="setList(form)">
    <OPTION>USA</OPTION>
    <OPTION>CANADA</OPTION>
    <OPTION>MEXICO</OPTION>
    <OPTION>INTERNATIONAL</OPTION>

    </SELECT>

    <SELECT NAME="list2">
    <OPTION>Shipping&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
    <OPTION><a Href="Zone11.html"></a></option>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>
    <OPTION></OPTION>

    </SELECT>
    </FORM>
    </BODY></HTML>

  2. #2
    Join Date
    Apr 2008
    Posts
    60
    hi

    You need to add a "submit" button and then, with PHP, you will need to retreive the values that the user entered and from their you will be able to create your cookie.

    If you do a quick google search about PHP forms you'll find easily some code to copy/paste; and same about how to create a cookie.

    HTH
    G.
    My SIP Switch : Open Source VoIP project

  3. #3
    Join Date
    Apr 2008
    Location
    utah
    Posts
    15
    G Bonnet,
    Thanks, but I don't think you realize that there are some of us who really
    are Dummies.. I know at least one of them,,,,, ME...
    I have no idea what a PHP is, or if I even have PHP on my computer.
    I have enough trouble with JavaScript!!!
    I Thank you since you are the only one who took time to answer.
    As I said, I have no idea what PHP is, and in your response you said I
    needed to add a "submit" button, not sure how or where this would go,
    but I think you might be telling me that once the user selects a state,
    I need to have another button asking him or her to submit..
    As it stands you could copy and paste my code , then you will see
    exactly what it does.
    I am slightly familiar with cookie set/get since I learn by example and I have
    seen some basic cookie code..

    Thanks again,,
    I would still welcome any advice other than suggesting I look up another
    tutorial,, I have been through many, and each one only leaves me more
    confused..
    As you can see there is not much hope for me...

    Frank

  4. #4
    Join Date
    May 2008
    Posts
    6
    From your post i assume that you do not want to deal with server side programming but i will mention it briefly. If you submitted the user selection from the request you could get the value of his selection and use it on the backend. So, in a servlet or portlet for example your could do
    Code:
    String state =request.getParameter("idOfSelectBox");
    and then you store it and use however you like. Since this is probably not the case, you could do something similar in javascript and use it while the user is on the same page (i mean without the page reloading from the browser cause you will loose the information)

    In order to get the the value from the select box you would need a javascript function to handle it for storage and then use it. So in your selelctbox you need to put an onChange() event to catch any user selection and trigger your function. I would suggest that you dropped the ready-made code and write one yourself so that you understand what you are doing. So for a simple select box you start with:

    HTML Code:
    <select id="state" name="state">
    <option value="alabama">Alabama
    <option value="newyork">New York
    <option value="california">California
    </select>
    you then need to notify your page that the value has changed so your selectbox tag now looks like this:

    HTML Code:
    <select id="state" name="state" onchange="storeState()">
    you now need to write the actual code of storing. You need a variable to store the information in and a simple function to store it

    Code:
    <script type="text/javascript" language="javascript">
    var state='';
    
    function storeState(){
    state=document.getElementById('state').value;
    }
    
    </script>
    this create a variable and then gets the value set in you selectbox identified by the id you gave it and stores it.

    to test that you now have stored the information you can put a button that creates an alert showing the information

    Code:
    <button onclick="showState()">Click Me</button>
    
    <script type="text/javascript" language="javascript">
    function showState(){
    alert('Your selection was:'+state);
    }
    </script>
    this puts an onclick event that triggers the function showState(). This function gets the value stored previously in the variable state and presents it in an alert.

    I think that now you understand how you can use this variable in other situations using javascript. You can use the variable itself or if you want to put the information in an other page element like an text input field you could do something like:

    Code:
    document.getElementById('idOfInputField').value=state;

    I hope I helped

    Website creation guides

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