...

View Full Version : <select> onChange



Gregoriochavez
08-23-2010, 03:55 AM
This is the html code I have on a web page. It is a sequence of three drop down menus of Country > State > City. Selecting a Country populates the State drop menu. Selecting a State populates the City menu. However, when a City is selected, I need that user to see a new window that shows information about that City (a standard html page). As I understand it, there should be a 'onChange' function somewhere, otherwise selecting a City does nothing at all. What is needed here, and where does it go? I thought perhaps it might go into the .js database containing all of the Country, State and City lists, but I don't have the knowledge skills to determine if that is the case. Some direction would truly be appreciated.

<form>
<table border="0">
<tr>
<td>
<select id='countrySelect' name='country' onchange='javascript: populateState(); populateCity();'></select>
</td>
<td>
<select id='stateSelect' name='state' onchange='javascript: populateCity();'></select>
</td>
<td>
<select id='citySelect' name='city'></select>
<script type="text/javascript">initCountry('CA'); </script>
</td>
</tr>
</table>
</form>

musicforte
08-23-2010, 05:15 AM
Sounds like you are trying to accomplish two things here...

1. Submit the form without a submit button
2. Present the correct data after the form is submitted

So you are correct about using onChange="this.form.submit()

Something like this ought to work:


<select id='citySelect' name='city' onchange='this.form.submit()></select>
<script type="text/javascript">initCountry('CA'); </script>
</form>


I don't know how your javascript is working, but I guess it is creating all the select options, so you might need to play with that.

Then, you need to define your form action, and pass the selected variable.

Personally, I would set the action to a php page that process the form with $_POST for whatever the city is.

<form action="process.php" method="post">

Then on the process.php page, you'll have something like:

$city = $_POST['city'];


And you can do what you want with it from there.

Sorry this isn't completely helpful. If you can post the page, I can do better. But maybe it will at least give someone else a chance to finish up on the idea here.

Gregoriochavez
08-23-2010, 05:26 AM
The javascript is below, and I have truncated the Country and State list of names for brevity. All that the existing form does is present the three dynamic drop box menus. Choose Country, then choose State, then choose City; period. That's it. There is nothing in there to make the form submit, as per your comment "using onChange="this.form.submit()". Where would it go? What would be required within the ()?




var postState = '';
var postCountry = '';
var postCity = '';

//City table
//
// To edit the list, just delete a line or add a line. Order is

important.
// If the city is in a state, write STATE before the relevant

codes (codes being GB, US etc)
// If the city is in a country, write COUNTRY before the relevant

codes (appears without a state being selected)
// The order displayed here is the order it appears on the drop

down.
//
var city = '\
STATE:UK:GLONDON:LONDON:London|\
COUNTRY:GB:LONDON:London|\
STATE:CA:BC:YVR:Vancouver|\
STATE:CA:BC:YYJ:Victoria|\
STATE:PE:AR:AQP:Arequipa|\
STATE:PE:LI:LIM:Lima|\
STATE:IT:SI:CTA:Catania|\
';


// State table
//
// To edit the list, just delete a line or add a line. Order is

important.
// The order displayed here is the order it appears on the drop

down.
//
var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
US:AS:American Samoa|\
US:AZ:Arizona|\
US:CA:California|\
US:CO:Colorado|\
US:CT:Connecticut|\

EI:CO KERRY:County Kerry|\
EI:CO LIMERICK:County Limerick|\
EI:CO TIPPERARY:County Tipperary|\
EI:CO WATERFORD:County Waterford|\
PE:AR:Arequipa|\
PE:LI:Lima|\
IT:SI:Sicily|\
';

// Country data table
//
// To edit the list, just delete a line or add a line. Order is

important.
// The order displayed here is the order it appears on the drop

down.
//
var country = '\
AF:Afghanistan|\
AL:Albania|\
DZ:Algeria|\
AS:American Samoa|\
AD:Andorra|\
AO:Angola|\
AI:Anguilla|\
EH:Western Sahara|\
WS:Western Samoa|\
YE:Yemen|\
YU:Yugoslavia|\
ZR:Zaire|\
ZM:Zambia|\
ZW:Zimbabwe|\
';

function TrimString(sInString) {
if ( sInString ) {
sInString = sInString.replace( /^\s+/g, "" );// strip leading
return sInString.replace( /\s+$/g, "" );// strip trailing
}
}

// Populates the country selected with the counties from the

country list

function populateCountry(defaultCountry) {
if ( postCountry != '' ) {
defaultCountry = postCountry;
}
var countryLineArray = country.split('|'); // Split into lines
var selObj = document.getElementById('countrySelect');
selObj.options[0] = new Option('Select Country','');
selObj.selectedIndex = 0;
for (var loop = 0; loop < countryLineArray.length; loop++) {
lineArray = countryLineArray[loop].split(':');
countryCode = TrimString(lineArray[0]);
countryName = TrimString(lineArray[1]);
if ( countryCode != '' ) {
selObj.options[loop + 1] = new Option(countryName,

countryCode);
}
if ( defaultCountry == countryCode ) {
selObj.selectedIndex = loop + 1;
}
}
}

function populateState() {
var selObj = document.getElementById('stateSelect');
foundState = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options.length=null;
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
// Populate the drop down with states from the selected country
var stateLineArray = state.split("|"); // Split into lines
var optionCntr = 1;
for (var loop = 0; loop < stateLineArray.length; loop++) {
lineArray = stateLineArray[loop].split(":");
countryCode = TrimString(lineArray[0]);
stateCode = TrimString(lineArray[1]);
stateName = TrimString(lineArray[2]);
if (document.getElementById('countrySelect').value ==

countryCode && countryCode != '' ) {
// If it's a input element, change it to a select
if ( selObj.type == 'text' ) {
parentObj = document.getElementById

('stateSelect').parentNode;
parentObj.removeChild(selObj);
var inputSel = document.createElement("SELECT");
inputSel.setAttribute("name","state");
inputSel.setAttribute("id","stateSelect");
inputSel.setAttribute("onchange","javascript:

populateCity()");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById('stateSelect');
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
if ( stateCode != '' ) {
selObj.options[optionCntr] = new Option(stateName,

stateCode);
}
// See if it's selected from a previous post
if ( stateCode == postState && countryCode == postCountry )

{
selObj.selectedIndex = optionCntr;
}
foundState = true;
optionCntr++
}
}
// If the country has no states, change the select to a text

box
if ( ! foundState ) {
parentObj = document.getElementById

('stateSelect').parentNode;
parentObj.removeChild(selObj);
// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "stateSelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "state");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postState);
parentObj.appendChild(inputEl) ;
}
}

var foundState = false; //global for third scrollbar

function populateCity() {
var selObj = document.getElementById('citySelect');
var foundCity = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options.length=null;
selObj.options[0] = new Option('Select City','');
selObj.selectedIndex = 0;
}
// Populate the drop down with states from the selected

state (and country)
var cityLineArray = city.split("|"); // Split into lines
//alert (cityLineArray);
var optionCntr = 1;
for (var loop = 0; loop < cityLineArray.length; loop++) {
lineArray = cityLineArray[loop].split(":");
if (foundState==true) { //take a city only from a

specified state:
typeCode = TrimString(lineArray[0]);
countryCode = TrimString(lineArray[1]);
stateCode = TrimString(lineArray[2]);
cityCode = TrimString(lineArray[3]);
cityName = TrimString(lineArray[4]);
} else { //no states so take a city from the

country itself:
typeCode = TrimString(lineArray[0]);
countryCode = TrimString(lineArray[1]);
stateCode = "";
cityCode = TrimString(lineArray[2]);
cityName = TrimString(lineArray[3]);
}
if (((typeCode=="STATE" && foundState==true) ||

(typeCode=="COUNTRY" && foundState==false)) &&

document.getElementById('countrySelect').value == countryCode &&

(document.getElementById('stateSelect').value == stateCode ||

foundState==false) && countryCode != '' && (stateCode != '' ||

foundState==false)) {
// If it's a input element, change it to

a select
if ( selObj.type == 'text' ) {
parentObj =

document.getElementById('citySelect').parentNode;
parentObj.removeChild(selObj);
var inputSel =

document.createElement("SELECT");
inputSel.setAttribute

("name","city");
inputSel.setAttribute

("id","citySelect");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById

('citySelect');
selObj.options[0] = new Option

('Select City','');
selObj.selectedIndex = 0;
}
if ( cityCode != '' ) {
selObj.options[optionCntr] = new

Option(cityName, cityCode);
}
// See if it's selected from a previous

post
if ( cityCode == postCity && countryCode

== postCountry && stateCode == postState) {
selObj.selectedIndex =

optionCntr;
}
foundCity = true;
optionCntr++
}
}
// If the state has no cities, change the select to a

text box
if ( ! foundCity ) {
parentObj = document.getElementById

('citySelect').parentNode;
parentObj.removeChild(selObj);
// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "citySelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "city");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postCity);
parentObj.appendChild(inputEl) ;
}
}




function initCountry(country) {
populateCountry(country);
populateState();
populateCity();
}

Gregoriochavez
08-23-2010, 05:34 AM
Have a look at www.capsulecomments.com and you will see what is there and how it works.

Gregoriochavez
08-23-2010, 05:51 AM
The page is at www.capsulecomments.com

musicforte
08-26-2010, 03:33 AM
I'm sorry. I have not been able to view your form code. Your page keeps hanging with translate.googleapis.com, and does not fully load.

Gregoriochavez
09-01-2010, 06:14 AM
This matter is now resolved. It can be viewed at capsulecomments.com. Thanks for the input.

musicforte
09-02-2010, 09:26 PM
I noticed you have some lines that you intended to have commented out, and they are not...



//City table.
//
// To edit the list, just delete a line or add a line. Order is

important.
// If the city is in a state, write STATE before the relevant

codes (codes being GB, US etc)
// If the city is in a country, write COUNTY before the relevant

codes (appears without a state being selected)
// The order displayed here is the order it appears on the drop

down.
//


Be sure to add // this to those lines that aren't correctly commented out. Without them, you will have an error.

Gregoriochavez
09-02-2010, 09:34 PM
Interesting point, however those lines ARE commented out and always were. The script runs fine with no errors. You can now view the website at capsulecomments.com

Thanks for the input though.

musicforte
09-02-2010, 09:40 PM
Actually, they are not commented out.

If they were you would have:



//City table.
//
// To edit the list, just delete a line or add a line. Order is

//important.
// If the city is in a state, write STATE before the relevant

//codes (codes being GB, US etc)
// If the city is in a country, write COUNTY before the relevant

//codes (appears without a state being selected)
// The order displayed here is the order it appears on the drop

//down.
//

IE recognizes this and generates an error alert. I don't know if that bothers you at all. When I build sites, I personally try to avoid that yellow alert icon that tells visitors something is wrong with your page (whether it actually effects the performance or not).

I'm not a big fan of IE, but I always do cross-browser checking.

The error from IE is:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; CPNTDF; .NET4.0C)
Timestamp: Thu, 2 Sep 2010 19:39:57 UTC


Message: Expected ')'
Line: 180
Char: 14
Code: 0
URI: http://www.capsulecomments.com/

Gregoriochavez
09-02-2010, 10:05 PM
I am curious as to the version of IE you are using if you are getting an error message. The coding was checked on Firefox, IE 8, Safari, Opera and Google before the site was posted, and then again after it was posted. For me, using IE 8, it works fine and displays the entire page as intended. Also, I checked one of my writers just now at Peru - Arequipa - Arequipa and it also displays as intended in IE 8. I had also asked three techie friends in other countries to check the site for me after it was originally posted, and they also found it completely functional with all browsers.

As for the //, if you expand your viewing window to avoid wrap-around, you will note that the commenting is correct. If you are viewing it where the word 'important' is on a new line, then expand it and you will see that it is all on one line. The fact that it works are intended tells me that all is well.

musicforte
09-02-2010, 10:34 PM
yeah... sorry. I'm not trying to harass you about it. But to answer your question. I'm using IE 8. I have attached two screen shots that I hope help.

It does not look like IE is wrapping it, because the source shows plenty of lines that extend beyond "x" amount of characters.

But this particular area in the code where it generates an error, looks like a line break. And it is generating an error on my version of IE, which does not have add-ons or plugins.

I'll leave it alone. But just wanted to show you what I'm seeing. You may need to view these in full resolution to see it well.

Notice the bottom left where it reads, "done, but with errors on page". If I double click that, it identifies the parenthesis on line 179. Since it is not needed, and it seems to be working fine for you and not for me, I would just remove it anyhow.

At least you'll know that other people aren't getting an error warning. But if it's good enough, that's fine. No need to be as picky as I am. :o


http://www.musicforte.tv/images/IEversion.jpg

And...

http://www.musicforte.tv/images/line179.jpg



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum