Start Free Trial

asked on

Passing select options via JavaScript from one HTML page to another...

Hello,

I am trying to get my select options (courses) passed correctly from the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html

I am having difficulty getting the courses to pass the correct option value and then be displayed at the following URL: http://www.dslextreme.com/users/kevinlyons/selectResults.html

I am passing countries, products, courses, etc. The others display as they should on the subsequent page, but the courses retains my loop variable rather than the value as I would like.

I am concerned that my JS & HTML code function correctly for an intranet site working in an IE environment only, but I have a few errors that I am trying to implement (which need fixing):

One, I need to be able to pass in the correct courses value to their results page. How can I populate the correct option values within the JavaScript code?

Two, I want to add hidden div tag code that will allow the use to suggest a course if not listed within the drop-down list. If the 15th element in the array is selected then the div should appear allowing for input. This is not quite working correctly. For now, the div code has been appearing whether or not the 15th element has been selected.

Three, I am trying to add capabilities when clicking the text to the right of the radio buttons that will accomplish the same as the actual selection of the radio buttons to populate the courses accordingly.

I welcome anyone to review the code from each to see what I can do to
correct things. Can someone assist? Again, the pages can be viewed at the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html

Thanks much,

Kevin

ASKER

Hello,

I have since made successful modifications to the code for my third request:

"Three, I am trying to add capabilities when clicking the text to the right of the radio buttons that will accomplish the same as the actual selection of the radio buttons to populate the courses accordingly."

I have also uploaded the corrections to the same URL.

Requests one and two are a bit more challenging; if anyone can assist that would be great!!

Again, the pages can be viewed at the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html

Thanks much,

Kevin

Michel Plungjan

Crossbrowser Errors:
function selectCourse() {
      if(document.oracle.courses.options[15].selected = true) {
            Hide.style.display="inline";
      }
      else {
            Hide.style.display="none";
      }
}

should be
document.getElementById('Hide').style.display

and function highlightButton(color) {
      if (event.srcElement.tagName == "INPUT")
            event.srcElement.className = color;
}

event is not defined.

I will switch to IE and look further

Michel Plungjan

and Hide is hide, lowercase

Michel Plungjan

change
document.write("<option value=counter>");
to
document.write('<option value="'+counter+'">');

Michel Plungjan

but it is simpler to change
                  Number = document.oracle.courses.options;
                  for (i = 2; i < document.oracle.courses.options.length; i++) {
                        Number[i].text = "";
                  }
                  for (i = 0; i < category.length; i++) {
                        Number[i + 2].text = category[i];
                  }

to

courseSelect = document.oracle.courses;
courseSelect.options.length =2; // delete all but the first two
for (i = 0; i < category.length; i++) {
courseSelect.options[(i + 2)] = new Option(category[i],(i+2));
}

Hi,

if(document.oracle.courses.options[15].selected = true)

should be:

if(document.oracle.courses.options[15].selected == true)

or
if(document.oracle.courses.options[15].selected)

Also, do you care about it not being nn4.7-friendly?
Vinny

Hi,

1) as a general rule, you should pass arguments to your functions whenever possible -- helps debugging since you know what you are passing

onchange="selectCourse( 'myDiv')" ...

function selectCourse(divID)

2) the following will work for IE4 & version 5+ browsers:

var divObj = (document.all) ? document.all[divID] : document.getElementById(divID);

3) don't use a 'static' index for comparison (unless it's '0') because if you change the number of available options, you will crash -- and six months from now you will not know why:

so change this:

if(document.oracle.courses.options[15].selected)
{
to:
if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')
{

ideally, the code should look something like:

....onchange="selectCourse( 'myDiv', this, this.selectedIndex)" ...

function selectCourse(divID, selObj, ndx)
{
var divObj = (document.all) ? document.all[divID] : document.getElementById(divID);

divObj.style.display = (selObj.options[ndx].value == 'someFlagforOtherCourses') ? "inline" : "none";
}

Vinny

ASKER

Michel & Vinny,

The Div code is still giving me problems. I have added your changes, but the Div code is displaying at all times. Only when any "Suggest a Course" option is selected should the Div appear allowing for input. This isn't yet working correctly. Likewise, the Div code should disappear when a different course is selected.

Thanks for the courses passing code. The courses value does get passed to the results page; however, can I pass the associated array text value instead of the number of the array?

Lastly, if the text for any of the radio buttons is reselected (making the radio button unchecked), then no options should be shown within the courses select options with the exception of the "-- Available Courses --" option. Similarly, if one presses the reset button, I would prefer the courses select options to display only the default!

Please let me know if you have any questions.

Thanks again,

Kevin

Hi Kevin,

1) place the div inside the <td></td>
<tr><td align="center" colspan="2"><div id="hide" style="display:none;"><h4 align="center">
<br>Please enter a suggested course name.</h4>
<p><input type="text" name="suggest"><p></div>
</td></tr>

2) the 'Suggest a course' option is index 18, not 15 -- change the logic to say what I said above. Do not use absolute numbers.

Vinny

Hi,

can I pass the associated array text value instead of the number of the array

create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the recieving page and ignore the passed index

> radio buttons is reselected (making the radio button unchecked), then no options should be shown within the courses select options with the exception of the "-- Available Courses --" option

put up a 'deselect all radio buttons' button
radio buttons, by definition, must have one selected -- once one is selected.

reset button --> .......onclick = 'document.formname.selectname.options[0].selected; reset()'
should work.
Vinny

ASKER

Vinny,

Thanks so much for your help; it has been invaluable!! I have uploaded the latest version, but a few things remain to be resolved:

1) Your version of the reset code gave me an error, so I am trying to get the reset to function correctly by making all reset including making the <tr id=hide> disappear if "suggest a course" had been selected. The reset I have coded does what I want but only after clicking it twice. Can it be coded to reset all after one click?

2) How do I use a 'dynamic' index for comparison for the courses data validation on the suggest input box?

You suggested:

so change this:
if(document.oracle.courses.options[18].selected)
{
to:
if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')
{:

How would I code the suggested above variables if the suggest course is contained for each country? again, here is the latest portion of this code:

      if (data.courses.options[18].selected) {
            if (data.suggest.value == "") {
                  alert("Please enter a suggested course name.");
                  data.suggest.focus();
                  return false;
            }
      }

3) Lastly, you mention the following to resolve my course name passing for the results page:

"You asked, 'can I pass the associated array text value instead of the number of the array'. Simply, create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the receiving page and ignore the passed index"

How do I go about writing the hidden field portion so that it doesn't matter which country array of data had been used?

Thanks again for all of your help; I am almost finished now!

Kevin

ASKER

Vinny,

Additionally, for the reset, I would like all of the options within the select courses list to clear but for the -- Available Courses -- option only, such as when one originally loads the page.

Less confusion this way.

Thanks,

Kevin

Hi Kevin,

what are the current issues now? I downloaded it, but there are so many commented lines, I'm not even sure which reset button is valid :) -- I've only had one mug of espresso after a long night of partying, so the ole gray matter is kinda lazy :D

looks like you took care of the options[18] problem -- length-1 :)

<input type = hidden name=txtVal>
document.formname.txtVal.value = document.formname.selectname.options[ndx].value

Vinny

ASKER

Vinny,

I have updated the doc to remove 99% of all comments (with the exception of the radio button code).

I am adding the hidden value, but I am getting an error on the variable - ndx. It is saying it is null or not an object.

I still haven't resovled the options[18] code: if (data.courses.options[18].selected) {

Similar to ndx above, I am not certain how to implement this?

We are really code; I really appreciate your help!!

Kevin

ASKER

Vinny,

I have since added some JavaScript date select boxes. Like the courses, I am having trouble assigning the correct value and/or getting them to pass to the results page.

Any thoughts on getting this resolved as well?

Thanks,

Kevin

Kevin,
which is the newest code? the link at the top?
http://www.dslextreme.com/users/kevinlyons/selectBoxes.html

because if it is...it is bombing all over the place.

if you are sending 'this', as in:

onChange="loadOptions(this)"

you are sending whatever the 'this' is pointing to. In this case, the select list object

so, it's ok to call the passed argument 'data', as in:
function loadOptions(datal) {

but it is much more descriptive, if you call it selObj
function loadOptions(selObj) {

also, in this case: selectCourse(this); the 'this' refers to the window object, not the select object

Do you still have the script from yesterday? I'm not sure I do and the cold I was working on yesterday is really beginning to fester into something more distracting

Vinny

ASKER

Vinny,

My two backups from last night: http://www.dslextreme.com/users/kevinlyons/selectBoxes_orig1.html
http://www.dslextreme.com/users/kevinlyons/selectBoxes_test.html

However, please consider the http://www.dslextreme.com/users/kevinlyons/selectBoxes.html link to be the master. I will attempt to add your code and comment the changes that is making it bomb.

Thanks much,

Kevin

ASKER

Vinny,

I just added your function call suggestions and commented out the new lines causing the bombing.

Thank you,

Kevin

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Vinny,

I am sorry to hear you might be running a fever. I hope you're feeling better today!

Regarding your code changes, I have integrated them and all worked perfectly!!! I have but a few things remaining. I am hoping we can wrap things up Wednesday, California, USA time if possible? You'll also notice in the latest version that I have added more to the table.

1) You had suggested using a 'dynamic' index for comparison for the courses data validation on the suggest input box? I have tried different variations to correct this, but I cannot get it to work.

These two lines in particular pertain to what you wrote about using a variation of this replacement code: if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')

if (data.courses.value == "" || data.courses.options[17].selected) {
if (data.courses.options[18].selected) {

2) Another had suggested I write the option values for courses similarly to what follows, but it had errored. He also advised that I add the close to each </option>. What do you think of implementing this code for courses and cities?

// document.write("<option value='" + document.oracle.countries + "_" + document.oracle.products[counter].value + "'>" + document.oracle.countries + "_" + document.oracle.products[counter] + "<\/option>");

3) I have begun to add city code based upon the countries select box (similar to the courses select). However, when I write the same logic the two selects are conflicting with each other. Can you assist in getting this to function correctly too? Also, have I written the data validation correctly?

4) Furthermore, you mention the following to resolve my course name passing for the results page:

"You asked, 'can I pass the associated array text value instead of the number of the array'. Simply, create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the receiving page and ignore the passed index"

How do I go about writing the hidden field portion so that it can populate the results page?

5) For my date select box data validation, I have a portion of it written near the bottom of the function verifyData(data), but I am having trouble verifying if the selected date is before or after the current date. Thoughts?

6) Lastly, if a product is selected before the country is selected and auto-populates the courses, the courses don’t populate unless a product radio button is reselected. Can this be avoided?

Thanks again for all of your help; we are almost finished now!

Kevin

Hi Kevin,

4am here in The City Where the World Once Stood; coughed myself awake. So...

all of this is untested:
1) document.oracle.courses.options[somePassedNdx].value == 'someFlag')

change: the selectCourse(ObjOrBool) function to function toggleDiv(ndx) -- it's more expressive of what it does.
also, where I have '*****someFlag****') put in the text that shows in the combo box -- I presume the text is always the same, right?

function toggleDiv(ndx)
{
var Hide = document.getElementById("hide");
var selRef = document.forms['oracle'].elements['courses'];

if (selRef.options[ndx].text == '*****someFlag****')

// if(selRef.selectedIndex == selRef.options.length-1)
{
Hide.style.display="";
document.oracle.suggest.focus();
}
else
Hide.style.display="none";
}

then change the select's onchange to:
<select name="courses" size=6 onChange="toggleDiv(this.selectedIndex)">

2) add the close to each </option> -- yes, you using FrontPage? that's who usually leaves them out.

This is for the courses values?
// document.write("<option value='" + document.oracle.countries + "_" + document.oracle.products[counter].value + "'>" + document.oracle.countries + "_" + document.oracle.products[counter] + "<\/option>");

Is this the output you want?
<option value='Australia_CourseName'>Australia_CourseName</option>

this:
document.oracle.countries + "_" +

would need an index and '.text' or '.value'
document.oracle.countries[index].value + "_" +

I'll check out the rest manana
Vinny

ASKER

Vinny,

Good morning! Looking at your time stamps I will assume you live on the east coast, New York perhaps? I live south of San Francisco myself.

Thanks again for the help. I have gone ahead and added your latest changes to my website and answered your questions below:

For the courses question ('*****someFlag****'), I am currently using test data, the courses will be different for each country (each city will have the same however).

Yes, that code was for the 'courses' and now the 'cities' values as well. Regarding the </option> question, rather than Microsoft's FrontPage, I actually use Allaire HomeSite (now Macromedia), but I always hand-code so I can see what is happening.

Yes, that is the output I want (etc.):
<option value='Australia_CourseName'>Australia_CourseName</option>

Another question, in the for loop, instead of "Australia_Database.length", what can I use to evaluate the largest array of courses to fully populate the courses? I don't want to limit the options in case Australia's is less one day than the highest country.

Lastly, I notice that '-- Available Courses --' gets pre-selected upon page load or reset. Can this be disabled too?

Thanks much,

Kevin

PS Do you use AOL IM? If so, you can reach me at lkkldtv or lkkldsl.

ASKER

Vinny,

How are things?

Have you had any time to look at the code any more.

Please let me know.

Thanks,

Kevin

Hi Kevin,

Sorry, but between the flu, other things, and trying to catch up on the time I lost....
I haven't had much time. Can you post a recent link? So I can see where things stand. And, number priorities. I'll try to get to it later tonight or tomorrow.

Also, regarding IM & my usage of same: I reserve it for friends, family and paying clients.

Vinny

ASKER

Vinny,

Thanks for the response! I hope you are feeling better now.

Here is the list in order of priority (I have gone ahead and added your latest changes to my website and answered your questions below):

1) For the courses question ('*****someFlag****'), I am currently using test data, the courses will be different for each country (cities for each country will have the same list of courses however).

Regarding the “This is for the courses values?” question:

// document.write("<option value='" + document.oracle.countries + "_" + document.oracle.products[counter].value + "'>" + document.oracle.countries + "_" + document.oracle.products[counter] + "<\/option>");”

Yes, that code was for the 'courses' and now the 'cities' values as well. Regarding the </option> question, rather than Microsoft's FrontPage, I actually use Allaire HomeSite (now Macromedia), but I always hand-code so I can see what is happening to the code!

Yes, that is the output I want (etc. for each country respectively):
<option value='Australia_CourseName'>Australia_CourseName</option>

I have tried, but I cannot implement the </option> code for both courses and cities?

2) I have begun to add the city code based upon the countries select box (similar to the courses select). However, when I write the same logic the two selects are conflicting with each other. Can you assist in getting this to function correctly too? Also, have I written the data validation correctly?

3) You had suggested using a 'dynamic' index for comparison for the courses data validation on the suggest input box? I have tried different variations to correct this, but I cannot get it to work.

These two lines in particular pertain to what you wrote about using a variation of this replacement code: if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')

if (data.courses.value == "" || data.courses.options[17].selected) {
if (data.courses.options[18].selected) {

4) Furthermore, you mention the following to resolve my course name also passing for the results page:

"You asked, 'can I pass the associated array text value instead of the number of the array'. Simply, create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the receiving page and ignore the passed index"

To no avail I have tried; how do I go about writing the hidden field portion so that it can populate the results page?

5) In the for loop, instead of "Australia_Database.length", what can I use to evaluate the largest array of courses to fully populate the courses? I don't want to limit the options in case Australia's is less one day than the highest country.

6) For my date select box data validation, I have a portion of it written near the bottom of the function verifyData(data), but I am having trouble verifying if the selected date is before or after the current date. Thoughts?

7) If a product is selected before the country is selected and auto-populates the courses, the courses don’t populate unless a product radio button is reselected. Can this be avoided?

8) Lastly, I notice that '-- Available Courses --' gets pre-selected upon page load or reset. Can this be disabled too?

Thanks much,

Kevin

ASKER

Vinny,

Have you had any time review any of the code this weekend?

Thanks much,

Kevin

Hi Kevin,

I downloaded the master copy and frankly, you seem to be moving the target all over the place.
I realize it may not be your choice, but I'm no longer confident I really know what you are doing.

For example, where did the 'city' and 'date' selection lists come from? They weren't there at the beginning of this thread.

Also, is the data coming from the mainframe or are you going to hardcode it -- as you did in the 'master' file?

Any rate.

These are the changes I made to fill the city selection list. Note the array city is an associative array object.

var country = ["Australia","Canada","China", "Germany","United Kingdom", "United States"];
var cityNames = ["Adelaide,Brisbane,Cairns,Melbourne,Perth,Sydney","Calgary,Edmonton,Montreal,Toronto,Vancouver,Winnipeg","Beijing,Chengdu,Jinan,Lanzhoo,Taiyuan,Xi’an","Berlin,Düsseldorf,Frankfurt,Hamburg,Hannover,Munich","Brighton,Liverpool,London,Manchester,Oxford,Southampton","Boston,Chicago,Los Angeles,New York,San Francisco,Washington DC"];

var city = new Array();
var j = 0;
for (var i = 0; i < country.length; i++)
{
tmp = country[i];
city[tmp] = new Array();
cityGroup = cityNames[j++];
cities = cityGroup.split(",");
for (var k = 0; k < cities.length; k++)
{
city[country[i]][k] = cities[k];
}
}

you can run this if you want to see how the city array works
//for (i in city)
// for (j = 0; j < city[i].length; j++)
// alert(i + ' = ' + city[i][j])

this is the function that fills the city list:

function fillCity(selVal)
{
document.oracle.cities.length = 1;
for (i in city[selVal])
{
ndx = document.oracle.cities.length;
document.oracle.cities.options[ndx] = new Option(city[selVal][i],city[selVal][i])
}
}

This is the html -- notes:
1) place quotes between all values ( <option value="United Kingdom">United.... )
2) do not use underscore in UK & US -- else they won't be found in the city array

<H4 align=center><BR>Please select the country and city where the course is to be offered.</H4>

<SELECT onchange="if(this.selectedIndex == 0) document.getElementById('hide').style.display = 'none'; else fillCity(this.options[this.selectedIndex].value);"
size=1 name=countries> <OPTION value=Top selected>-- Select Country
--</OPTION> <OPTION value=Blank></OPTION> <OPTION
value=Australia>Australia</OPTION> <OPTION value=Canada>Canada</OPTION>
<OPTION value=China>China</OPTION> <OPTION
value=Germany>Germany</OPTION> <OPTION value="United Kingdom">United Kingdom</OPTION> <OPTION value="United States">United
States</OPTION>
</SELECT>

<SELECT onchange=selectCity(this) size=1 name=cities>
<OPTION value=Top selected>-- Select City --</OPTION>
</SELECT>

unless you are doing something I don't know about, kill the following ( I removed it from the above list)
<SCRIPT language=javascript type=text/javascript>

</SCRIPT>

Vinny

ASKER

Vinny,

Yes, you are right. My boss asked for the extra information, i.e. city and dates. In fact, when I get all of this working, he would like email address added as well. (I should have no difficulties getting that myself however.) By the way, he is hoping to see a prototype of what I have been working on by Wednesday!

Eventually the data might be queried in from Oracle 9i, but for the foreseeable future, the data will continue to be hard coded as it has been.

I have gone ahead and made your modifications. However, I am getting an error each time I select a different city name.

Should all occurrences of "_" within the code be streamlined against being used? If so, similarly to your city names code, should the 'courses' data be an associative array object as well?

Here is the updated list of things to finish in order of priority:

1) The underscores are now an issue for the courses when UK or US is selected. Do you have any suggestions to correct this?

2) You had suggested using a 'dynamic' index for comparison for the courses data validation on the suggest input box? I have tried different variations to correct this, but I cannot get it to work.

These two lines in particular pertain to what you wrote about using a variation of this replacement code: if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')

if (data.courses.value == "" || data.courses.options[17].selected) {
if (data.courses.options[18].selected) {

3) Furthermore, you mention the following to resolve my course name also passing for the results page:

"You asked, 'can I pass the associated array text value instead of the number of the array'. Simply, create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the receiving page and ignore the passed index"

To no avail I have tried; how do I go about writing the hidden field portion so that it can populate the results page?

4) In the for loop, instead of "Australia_Database.length", what can I use to evaluate the largest array of courses to fully populate the courses? I don't want to limit the options in case Australia's is less one day than the highest country.

5) For my date select box data validation, I have a portion of it written near the bottom of the function verifyData(data), but I am having trouble verifying if the selected date is before or after the current date. Thoughts?

6) If a product is selected before the country is selected and auto-populates the courses, the courses don’t populate unless a product radio button is reselected. Can this be avoided?

Thanks much,

Kevin

ASKER

Vinny,

I have since updated the email address portion.

After the city and courses selects get fixed can you next assist with the passing of all data to the results page? I am sure that my boss would like to see this functionality!

Kevin

ASKER

Vinny,

Is there any chance you can help me today to finish this list, as I need to demo tomorrow?

I have made a few modifications; here is the updated list:

1) I am getting an error each time I select a different city name. The underscores are now an issue for the courses when UK or US is selected. Do you have any suggestions to correct this?

2) Should all occurrences of "_" within the code be streamlined against being used? If so, similarly to your city names code, should the 'courses' data be an associative array object as well?

3) You had suggested using a 'dynamic' index for comparison for the courses data validation on the suggest input box? I have tried different variations to correct this, but I cannot get it to work.

These two lines in particular pertain to what you wrote about using a variation of this replacement code: if(document.oracle.courses.options[somePassedNdx].value == 'someFlag')

if (data.courses.value == "" || data.courses.options[17].selected) {
if (data.courses.options[18].selected) {

4) Furthermore, you mention the following to resolve my course name also passing for the results page:

"You asked, 'can I pass the associated array text value instead of the number of the array'. Simply, create a hidden field, pass the text value to the hidden field -- pick up the hidden field in the receiving page and ignore the passed index"

To no avail I have tried; how do I go about writing the hidden field portion so that it can populate the results page?

5) For my date select box data validation, I have a portion of it written near the bottom of the function verifyData(data), but I am having trouble verifying if the selected date is before or after the current date. Thoughts?

6) If a product is selected before the country is selected and auto-populates the courses, the courses don’t populate unless a product radio button is reselected. Can this be avoided?

Thanks much,

Kevin

Hi Kevin,

I'll try to get to it asap, but...
1) a lot of the problems are because you are not viewing the data -- e.g.
when the data is downloaded from the dbms, you are going to be using something like:

select country, city, course, courseDate, courseID from.....

This implies the data will be coming down something like:
"Germany, Hamburg, Basic SQL, 11/11/03"
"Germany, Hamburg, Basic SQL, 1/1/04"
"Germany, Berlin, Basic SQL, 12/1/04"

To me, this means the user needs to select:
1) the country -- which then decides which cities are displayed
2) the city -- which then decides which courses are displayed
3) the course -- which finally decides which dates are open

The user should never input a date -- s/he should only accept one of X number of possible dates.

So...instead of the date selector, you need a hidden div that appears when the country,city,course is selected
this div could be a set of radio buttons or a selection list

insofar as dynamically deciding whether the user selected 'suggest a course':

something like:
if (document.formname.selectname.text.indexOf("suggest a course") != -1)

Vinny

Hi Kevin,

Make sure the text always reads "Suggest a Course"
in the validate function:

if (data.courses.options[data.courses.selectedIndex].text.indexOf("Suggest") != -1) {
if (data.suggest.value == "") {
alert("Please enter a suggested course name.");
data.suggest.focus();
return false;
}
}

function toggleDiv(ndx)
{
var Hide = document.getElementById("hide");
var selRef = document.forms['oracle'].elements['courses'];

if (selRef.options[ndx].text.indexOf("Suggest") != -1)
{
Hide.style.display="";
document.oracle.suggest.focus();
}
else
Hide.style.display="none";
}

you get the error because you are calling a function that doesn't exist.
since you are faking the dates, create a 'stub' function:

function selectCity(selVal)
{
}

when you really decide to add the course dates, you need to display all dates for the course selected.

ASKER

Vinny,

I will add the changes a little later in the afternoon (2:15pm, my time).

Would you help out with the hidden form passing the variables?

Thanks,

Kevin

//country, city, courseArray, courseArrayNdx, courseDate

var availCourses = new Array()
availCourses[0] = "Australia,Adelaide,0,1,11/23/03"
availCourses[1] = "Australia,Adelaide,0,1,12/23/03"
availCourses[2] = "Australia,Adelaide,1,1,11/23/03"
availCourses[3] = "Australia,Adelaide,3,1,11/23/03"
availCourses[4] = "Australia,Brisbane,0,1,11/23/03"
availCourses[5] = "Australia,Brisbane,0,1,12/23/03"
availCourses[6] = "Australia,Brisbane,0,1,1/23/04"
availCourses[7] = "Australia,Brisbane,0,1,2/23/04"
availCourses[8] = "Canada,Toronto,0,1,11/21/03"
availCourses[9] = "Canada,Toronto,1,1,11/22/03"
availCourses[10] = "Canada,Toronto,2,1,11/23/03"
availCourses[11] = "Canada,Toronto,3,1,11/24/03"

function selectCity(selVal)
{

var formObj = document.oracle;
var country = formObj.countries.options[formObj.countries.selectedIndex].text;
var city = formObj.cities[document.oracle.cities.selectedIndex].text

var found = false;
var course2find = country + "," + city;
for ( var i = 0; i < availCourses.length; i++)
{
if (availCourses[i].indexOf(course2find) != -1)
{
alert(availCourses[i])
found = true;
}
}

if (! found)
alert("Sorry. Currently there are no courses planned for " + city)
}

//country, city, courseArray, courseArrayNdx, courseDate

var availCourses = new Array()
availCourses[0] = "Australia,Adelaide,0,1,11/23/03"
availCourses[1] = "Australia,Adelaide,0,1,12/23/03"
availCourses[2] = "Australia,Adelaide,1,1,11/23/03"
availCourses[3] = "Australia,Adelaide,3,1,11/23/03"
availCourses[4] = "Australia,Brisbane,0,1,11/23/03"
availCourses[5] = "Australia,Brisbane,0,1,12/23/03"
availCourses[6] = "Australia,Brisbane,0,1,1/23/04"
availCourses[7] = "Australia,Brisbane,0,1,2/23/04"
availCourses[8] = "Canada,Toronto,0,1,11/21/03"
availCourses[9] = "Canada,Toronto,1,1,11/22/03"
availCourses[10] = "Canada,Toronto,2,1,11/23/03"
availCourses[11] = "Canada,Toronto,3,1,11/24/03"

function selectCity(selVal)
{

var formObj = document.oracle;
var country = formObj.countries.options[formObj.countries.selectedIndex].text;
var city = formObj.cities[document.oracle.cities.selectedIndex].text

var found = false;
var course2find = country + "," + city;
for ( var i = 0; i < availCourses.length; i++)
{
if (availCourses[i].indexOf(course2find) != -1)
{
alert(availCourses[i])
found = true;
}
}

if (! found)
alert("Sorry. Currently there are no courses planned for " + city)
}

ASKER

Vinny,

Your changes/suggestions appear pretty awesome!!

Unfortunately, I have just a few hours left until I demo so I won't be able to incorporate your code until a later time.

Would you be so kind as to fix the most important, following things before 10am PDT? (You'll notice that I updated quite a bit of the selectResults.html file!)

1) I need to add a blank row (that cannot be passed upon submit via the verifyData validation) for the 'cities' after the top default value. (Similar to the other select boxes.)
2) I had to revert back to older code so that I could use the 'suggest a course' option. However, when I select the UK or US, the 'products' still gives me an error. Is there a quick fix?
3) Can you correct my code so that the email address in the results page shows as a link?
4) Time permitting, can you help me to get the date validation working for dates occurring prior to today?

By the way, please do not laugh at the way I passed in the courses and date data... :)

Thanks much,

Kevin

ASKER

Vinny,

The demo went pretty well! Thanks again!

Would you be able to help me to fix the final portions?

1) I need to add a blank row (that cannot be passed upon submit via the verifyData validation) for the 'cities' after the top default value. (Similar to the other select boxes.)
2) I had to revert back to older code so that I could use the 'suggest a course' option. However, when I select the UK or US, the 'products' still gives me an error. Is there a quick fix?
3) Can you correct my code so that the email address in the results page shows as a link?
4) Time permitting, can you help me to get the date validation working for dates occurring prior to today?

Thanks much,

Kevin

ASKER

Vinny,

Is there any chance you might be able to assist with the above four portions?

Kevin

Kevin:

What happened to the 'Available Courses' selection list? Nothing is coming up.
I can't help you if things keep changing every time I look.

1) I need to add a blank row (that cannot be passed upon submit via the verifyData validation)

why? the easiest thing to do would be to pass the value and then ignore it.

2) I had to revert back to older code so that I could use the 'suggest a course' option.
However, when I select the UK or US, the 'products' still gives me an error. Is there a quick fix?

Why did you have to revert back to the older code? The only way you will know if someone selected that option is:
a) it is a specific option index -- (you could always make it the first option)
b) you check the selected option's value and/or text

3) Can you correct my code so that the email address in the results page shows as a link?

document.write("A copy of this enrollment confirmation has been emailed to <a href='mailto:" + params.email + "'>" +
params.email + "</a> for reference purposes!<p>Please remember to check back at the Oracle University website
regularly, as new courses are added weekly.<p>");

4) Time permitting, can you help me to get the date validation working for dates occurring prior to today?
Not for nothing, but if the dates are coming from the database (which they should be; otherwise people will be registering
for course dates that do not exist), why are you fiddling with this?

Vinny

ASKER

Vinny,

I went ahead and updated the email address code and am forgetting abvout the date validation; now just 2 things remain!!

-------------------------------

From what I see on http://www.dslextreme.com/users/kevinlyons/selectBoxes.html the 'Available Courses' selection list works for all but United Kingdom and United States.

"Why did you have to revert back to the older code? The only way you will know if someone selected that option is:
a) it is a specific option index -- (you could always make it the first option)
b) you check the selected option's value and/or text"

I am not sure how to code what you wrote?

-------------------------------

For "why? the easiest thing to do would be to pass the value and then ignore it.", I don't ever want a user to be able to pass the value. They must choose an appropriate option!

Each time I have tried to add in the blank row it doesn't display. Can you help again?

-------------------------------

Thanks again,

Kevin

this is how you check if 'Suggest a course' was picked
function toggleDiv(ndx)
{
var Hide = document.getElementById("hide");
var selRef = document.forms['oracle'].elements['courses'];

if (selRef.options[ndx].text.indexOf("Suggest") != -1)
{
Hide.style.display="";
document.oracle.suggest.focus();
}
else
Hide.style.display="none";
}

>>Each time I have tried to add in the blank row it doesn't display. Can you help again?
where is this code?

Vinny

ASKER

Vinny,

I made the modification, but United Kingdom and United States are erroring for the courses still. Thoughts?

I added the code giving me trouble for the blank row. I have it commented in between the  code.

I know I am very close, but I am missing a simple something?!?

Thanks,

Kevin

Kev:

This is what I mean, you are propagating spaghetti code. I thought we agreed you are not going
to use an underscore. That is why you are getting the error -- there is no country with an underscore.

Any rate: this is the fix -- and I really don't like what you are making me do; it's like writing cobol or basic.

selObj.options[0].selected = true;
selectChoice = document.oracle.countries.value;
if(selectChoice == 'United Kingdom') selectChoice = 'United_Kingdom';
if (selectChoice == 'United States') selectChoice = 'United_States';

i'll get back to you on the other 'fix'

Vinny

>>I need to add a blank row (that cannot be passed upon submit via the verifyData validation)
for the 'cities' after the top default value. (Similar to the other select boxes.)

I just looked at the code again.
1) what are those blanks in the selection lists supposed to be?
2) why do you need them?
3) what are you asking for above?

I have no idea what is going on.

Vinny

ASKER

Vinny,

Great, the UK and US code is now fixed!!

The blank optoin for city is to be the same as countries and courses, i.e. --select a city--, then a blank, then the list of options.

I don't like it that much, but the Oracle University manager wants it to conform to standards on the website.

Kevin

Kevin

is this what you mean?

function fillCity(selVal)
{
document.oracle.cities.length = 2;

if so, do me a favor -- close the question, award the points, and if you have any further questions, start a new question

Vinny

ASKER

Vinny,

Worked Beautiful!!

Thanks much,

Kevin