Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 33

Aug 28th, 2010

Javascript doesn't run

Expand Post »

I have spent days trying to get this web page to function as intended. If I have the .js in a separate file and reference it from the web page <head>, the page works fine. However, once it is embedded instead, nada. This is the entire web page coding, including the .js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex">
<title>Test page</title>

</head>

<body>

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

<script type="text/javascript" language="javascript">
/*
Country State Drop Downs v1.0.
(c) Copyright 2005 Down Home Consulting, Inc.
www.DownHomeConsulting.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

*/

// If you have PHP you can set the post values like this
//var postState = '<?= $_POST["state"] ?>';
//var postCountry = '<?= $_POST["country"] ?>';
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 COUNTY 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|\
COUNTRY:CA:BC:Vancouver|\
COUNTRY:CA:BC:Victoria|\
STATE:US:CA:LAX:Los Angeles|\
';

// 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|\
US

.C.|\
US

ennsylvania|\
US

uerto Rico|\
US

alau|\
US:RI:Rhode Island|\
US

outh Carolina|\
US

rince Edward Island|\
CA:QC:Quebec|\
CA

ara|\
BR

araiba|\
BR

ernambuco|\
BR

iaui|\
BR

anta Catarina|\
BR

ergipe|\
BR

ao Paulo|\
BR:TO:Tocatins|\
NL

ERBY

erbyshire|\
UK

EVON

evon|\
UK

ORSET

orset|\
UK

URHAM

HROPS

hropshire|\
UK

omerset|\
UK

TAFFS

taffordshire|\
UK

UFF

uffolk|\
UK

URREY

urrey|\
UK

USS

enmark|\
DJ

jibouti|\
DM

ominica|\
DO

akistan|\
PW

alau|\
PS

alestinian Territory, Occupied|\
PA

anama|\
PG

apua New Guinea|\
PY

araguay|\
PE

eru|\
PH

hilippines|\
PN

itcairn|\
PL

oland|\
PT

ortugal|\
PR

aint Kitts And Nevis|\
SM

an Marino|\
ST

ao Tome and Principe|\
SA

audi Arabia|\
SN

enegal|\
XS

erbia-Montenegro|\
SC

eychelles|\
SL

ierra Leone|\
SG

ingapore|\
SK

lovak Republic|\
SI

lovenia|\
SB

olomon Islands|\
SO

omalia|\
ZA

outh Africa|\
GS

outh Georgia And The South Sand|\
KR

outh Korea|\
ES

pain|\
LK

ri Lanka|\
NV

t. Christopher and Nevis|\
SH

t. Helena|\
LC

t. Lucia|\
PM

t. Pierre and Miquelon|\
VC

t. Vincent and the Grenadines|\
SD

udan|\
SR

uriname|\
SJ

valbard And Jan Mayen Islands|\
SZ

waziland|\
SE

weden|\
CH

witzerland|\
SY

yrian Arab Republic|\
TW:Taiwan|\
TJ:Tajikistan|\
TZ:Tanzania|\
TH:Thailand|\
TG:Togo|\
TK:Tokelau|\
TO:Tonga|\
TT:Trinidad and Tobago|\
XU:Tristan da Cunha|\
TN:Tunisia|\
TR:Turkey|\
TM:Turkmenistan|\
TC:Turks and Caicos Islands|\
TV:Tuvalu|\
UG:Uganda|\
UA:Ukraine|\
AE:United Arab Emirates|\
UK:United Kingdom|\
GB:Great Britain|\
US:United States|\
UM:United States Minor Outlying Isl|\
UY:Uruguay|\
UZ:Uzbekistan|\
VU:Vanuatu|\
XV:Vatican City|\
VE:Venezuela|\
VN:Vietnam|\
VI:Virgin Islands (U.S.)|\
WF:Wallis and Furuna Islands|\
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");

inputSel.setAttribute("onchange","java_script: if (this.selectedIndex!=0) {window.location='' + (this.options[this.selectedIndex].text) + '.html';}");
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();
}

</script>

</body>
</html>

The problem 'might' be in the location, but I am not sure. This is the piece of that code for that:

inputSel.setAttribute("onchange","java_script: if (this.selectedIndex!=0) {window.location='' + (this.options[this.selectedIndex].text) + '.html';}");

Any and all suggestions are welcome. I've had tremendous support in building this .js, and I thank those who have contributed. Feel free to copy and use it.

Similar Threads

how to run javascript program in JavaScript / DHTML / AJAX
Tell Ajax/javascript to run a perl script in JavaScript / DHTML / AJAX
javascript inserting between jsp in JSP
Javascript gives error on localhost in JavaScript / DHTML / AJAX
JavaScript and Browsers IE in JavaScript / DHTML / AJAX

Gregoriochavez

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Aug 2010

Permalink

Aug 28th, 2010

Re: Javascript doesn't run

Sorry, I should have also mentioned that the web site is at capsulecomments.com

Gregoriochavez

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Aug 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: How to create Link for opens in another tab ?

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: possible? making form sent to div tag

DaniWeb Message

Cancel Changes

User Name
Password