PDA

Click to See Complete Forum and Search --> : Dropdown list tutorial for dum(me)s

tooldforthis
05-07-2008, 10:23 PM
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>
gbonnet
05-08-2008, 09:52 AM
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.
tooldforthis
05-08-2008, 11:13 PM
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
mastorak
05-11-2008, 10:07 AM
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

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:

<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:

<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

<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

<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:

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


I hope I helped

Website creation guides (http://www.websitecreationguides.com)