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

[Kevin Lyons]

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, and courses. The first two display
as they should on the subsequent page, but the courses retains my loop
variable rather than the value as I would like. Additionally, I
notice that the variable is not being split from the products.

I welcome anyone to review the code from each to see what I can do to
correct things.

Thanks much,

Kevin

 

[Hywel Jenkins]

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, and courses. The first two display
as they should on the subsequent page, but the courses retains my loop
variable rather than the value as I would like. Additionally, I
notice that the variable is not being split from the products.

This may help:
http://hyweljenkins.co.uk/programming.php?grp=JavaScript&id=5

 

[DU]

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, and courses. The first two display
as they should on the subsequent page, but the courses retains my loop
variable rather than the value as I would like. Additionally, I
notice that the variable is not being split from the products.

I welcome anyone to review the code from each to see what I can do to
correct things.

Thanks much,

Kevin

You're using 32 array variables for your code when right now, I think
you only need 5 arrays and that's it. I do not understand what you do
with your 8
var Top_Database = new Array();
var Top_Development = new Array();
var Top_Server = new Array();
var Top_Applications = new Array();

var Blank_Database = new Array();
var Blank_Development = new Array();
var Blank_Server = new Array();
var Blank_Applications = new Array();
arrays. You declare these 8 arrays but you never define them nor use
them. Avoid this furthermore if your script functions already (handle a
lot of variables, arrays) demand a lot of cpu and RAM from the user's
system resources.

Don't you see that there is a lot of repetitive elements in your script
code (24 other arrays)? Everytime there is elements repeating
themselves, then a loop can optimize the code and make it more compact,
efficient.
I'm pretty much convinced you can replace these 24 arrays by 5 arrays
which can/will combine themselves dynamically to generate the values in
your <select name="courses" ...>

Absolutely avoid eval() calls in your code; this is widely known to be
inferior, slow, buggy, bad or simply wrong from a programming perspective.
Also, avoid as much as possible document.write() calls. 99.9% such calls
can be replaced by DOM attributes and methods which are giving far more
DOM and script powers to a page.

Quote all your attribute values everywhere: you avoid errors just by
doing so and you help speed up a bit parsing. E.g. in your code:
<td width=25%> will be read and parsed as a td which requested width is
25 pixels, not 25% of its parent container.

http://www.htmlhelp.org/faq/html/basics.html#quotes
"By default, SGML requires that all attribute values be delimited using
either double quotation marks (...)"
http://www.w3.org/TR/html4/intro/sgmltut.html#attributes
Why attribute values should always be quoted in HTML
http://www.cs.tut.fi/~jkorpela/qattr.html

if (event.srcElement.tagName == "INPUT")
event.srcElement.className = color;
Avoid coding for MSIE only; your page can comply entirely with W3C web
standards and work flawlessly in W3C web standards compliant browsers.
srcElement is not a recognized attribute of the DOM 2 Event (target is);
event is not an recognized object in W3C DOM 2 Events. With just a bit
of cross-browser code, you can make your page work in at least 25 other
browsers here.

Knowing the default values of attributes can reduce tag soup of a page.
The default horizontal alignment of <td> cells is left. So,
<td align="left" ...> is 99% of the time an useless, pointless
declaration. Same thing with knowing which css properties are inherited
and what are the default values in browsers: knowing so often means you
don't even have to declare them. Good and wise coding techniques of this
sort help make a page far more efficient, fast, robust, avoiding
problems or crashes, makes a page more interoperable, etc..

Use a doctype declaration for your html file and validate your webpage.
Doing so is in your best interests so that your page renders
consistently on W3C web standards compliant browsers and that it
interoperates on different media, os, web-aware devices, etc..

W3C validator
http://validator.w3.org/

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html

List of valid doctype
http://www.w3.org/QA/2002/04/valid-dtd-list.html

My Web site is standard! And yours? by W3C Quality Assurance
http://www.w3.org/QA/2002/04/Web-Quality

Why we won't help you
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Lasse Reichstein Nielsen]

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Kevin Lyons]

Lasse,

Thanks for your suggestions; they worked great!

First of all, this is for an intranet site working in an IE
environment only, but I now have a few errors with other things that I
am trying to implement (which need fixing):

One, I still 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.

Can you or another assist with my code? Again the pages can be viewed
at the following URL:
http://www.dslextreme.com/users/kevinlyons/selectBoxes.html

Thanks much,

Kevin

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Kevin Lyons]

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

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Lasse Reichstein Nielsen]

First of all, this is for an intranet site working in an IE
environment only, but I now have a few errors with other things that I
am trying to implement (which need fixing):

I'll be testing in Opera 7.2, but I hope the results will work in IE
too

One, I still 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?

What is the correct courses value?
As it is now, selecting a country and clicking on a product category adds
one course. However, there is also a line with some Javascript, which looks
like a bug.

Checking... it is a bug.
You write:
---
<option>-- Available Courses --
<script language="javascript" type="text/javascript">
for (counter=0; ...
---
While the end tag for option elements are optional, leaving them out
can be ambiguous. Inside an option tag, you are only allowed to have
*text*, not HTML. The script tag is technically inside the option element,
so it is ignored, and the content is made part of the option text. If
you add </option> at the end of the first line, it seems to work to me.

I.e., it is an HTML problem.

The script in the tag isn't too good either:
---
for (counter=0; counter < Australia_Database.length; counter++) {
document.write("<option value=counter>");
}
---
You write 16 times "<option value=counter>", options with the same
value and no text. What you propbably meant to write is:
document.write("<option value='" + counter + "'>" +
Australia_Database[counter] + "<\/option>");

(as a style note, I would drop the blank option in the country select, it
looks weird, and is confuzing when you select using the keyboard).

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.

I guess the culprit is this function:
---
function selectCourse() {
if(document.oracle.courses.options[15].selected = true) {
Hide.style.display="inline";
}
else {
Hide.style.display="none";
}
}
---
Where do I begin?

I assume Hide is a global variable declared somewhere else to refer
to the div with id="hide". Ok, I did, but now I have looked for it,
and it isn't declared anywhere.

You use "=" for comparison. It is actually assignment, so every time
you change the selection, the element number 15 is selected again. For
"Application Server", that is "Online Library", not "Suggest a
Course". You have two lines at the begining of the select ("Select
course" and a blank option (I don't like blank options!), so the
16th option you add has selectedIndex 17.

This is also highly unstable code, since it depends on all categories
having the same number of entries. What happens when a new Database
coimes out, so there are 16 databases?

Finally, the div itself is placed inside a table, wrapping a tr tag.
That is not a legal position for a div, which you would know if your
code validated (get your HTML code validating! It saves you and us
so much trouble!). What you can do, is to move the id="hide" onto
the tr tag itself: <tr id="hide" style="display:none;">, and drop the div.

I recommend the following function:
---
function selectCourse() {
var Hide = document.getElementById("hide");
var selRef = document.forms['oracle'].elements['courses'];
if(selRef.selectedIndex == selRef.options.length-1) {
Hide.style.display="";
} else {
Hide.style.display="none";
}
}
---

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 don't think your changeRadio function is working. It might change
the "checked" property of the radiobutton, but it won't call its
onclick handler, so the courses aren't updated when you click on the
label. Also, it uses "eval", which should almost never be used in
practice.

You call it as:
onClick="changeRadio('document.oracle.products[1]')"
Just remove the quotes, and send a reference to the element itself:
onClick="changeRadio(document.forms['oracle'].elements['products'][1])"
Then the code for the function would be:
function changeRadio(val) {
val.click();
}
It is a radio group. You don't want to be able to unselect all the elements,
so no need for "val.checked = !val.checked". Also, this function is so
simple, that you might as well inline it.

Instead of using a span, you should use the element that is meant for
exactly this: label.

<label style="cursorointer;cursor:hand;"
onclick="document.forms['oracle'].elements['products'][0].click()">
<input type="radio" name="products" value="Database" onClick="loadOptions()">
Database
</label>

(I always write my form references out with "forms" and "elements"
collections.)

You also use "eval" in one other place:
category = eval(selectChoice + "_" + radioChoice);
This can be changed to the much faster and non-eval-using:
category = window[selectChoice + "_" + radioChoice];

Good luck
/L

 

[Kevin Lyons]

I have made more modifications to the code. The Div code is still
giving me problems. It is still 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.

I have the courses value now getting passed to the results page;
however, how 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 anyone has any questions.

Thanks much,

Kevin

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

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Kevin Lyons]

Lasse,

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) I am trying to get the reset to function correctly by making all
reset including making your <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) Another on Experts-Exchange had suggested that I "don't use a
'static' index for comparison (unless it's '0') for the courses data
validation on the suggest input box 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[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? 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) The same individual mentions 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

First of all, this is for an intranet site working in an IE
environment only, but I now have a few errors with other things that I
am trying to implement (which need fixing):

I'll be testing in Opera 7.2, but I hope the results will work in IE
too

One, I still 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?

What is the correct courses value?
As it is now, selecting a country and clicking on a product category adds
one course. However, there is also a line with some Javascript, which looks
like a bug.

Checking... it is a bug.
You write:
---
<option>-- Available Courses --
<script language="javascript" type="text/javascript">
for (counter=0; ...
---
While the end tag for option elements are optional, leaving them out
can be ambiguous. Inside an option tag, you are only allowed to have
*text*, not HTML. The script tag is technically inside the option element,
so it is ignored, and the content is made part of the option text. If
you add </option> at the end of the first line, it seems to work to me.

I.e., it is an HTML problem.

The script in the tag isn't too good either:
---
for (counter=0; counter < Australia_Database.length; counter++) {
document.write("<option value=counter>");
}
---
You write 16 times "<option value=counter>", options with the same
value and no text. What you propbably meant to write is:
document.write("<option value='" + counter + "'>" +
Australia_Database[counter] + "<\/option>");

(as a style note, I would drop the blank option in the country select, it
looks weird, and is confuzing when you select using the keyboard).

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.

I guess the culprit is this function:
---
function selectCourse() {
if(document.oracle.courses.options[15].selected = true) {
Hide.style.display="inline";
}
else {
Hide.style.display="none";
}
}
---
Where do I begin?

I assume Hide is a global variable declared somewhere else to refer
to the div with id="hide". Ok, I did, but now I have looked for it,
and it isn't declared anywhere.

You use "=" for comparison. It is actually assignment, so every time
you change the selection, the element number 15 is selected again. For
"Application Server", that is "Online Library", not "Suggest a
Course". You have two lines at the begining of the select ("Select
course" and a blank option (I don't like blank options!), so the
16th option you add has selectedIndex 17.

This is also highly unstable code, since it depends on all categories
having the same number of entries. What happens when a new Database
coimes out, so there are 16 databases?

Finally, the div itself is placed inside a table, wrapping a tr tag.
That is not a legal position for a div, which you would know if your
code validated (get your HTML code validating! It saves you and us
so much trouble!). What you can do, is to move the id="hide" onto
the tr tag itself: <tr id="hide" style="display:none;">, and drop the div.

I recommend the following function:
---
function selectCourse() {
var Hide = document.getElementById("hide");
var selRef = document.forms['oracle'].elements['courses'];
if(selRef.selectedIndex == selRef.options.length-1) {
Hide.style.display="";
} else {
Hide.style.display="none";
}
}
---

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 don't think your changeRadio function is working. It might change
the "checked" property of the radiobutton, but it won't call its
onclick handler, so the courses aren't updated when you click on the
label. Also, it uses "eval", which should almost never be used in
practice.

You call it as:
onClick="changeRadio('document.oracle.products[1]')"
Just remove the quotes, and send a reference to the element itself:
onClick="changeRadio(document.forms['oracle'].elements['products'][1])"
Then the code for the function would be:
function changeRadio(val) {
val.click();
}
It is a radio group. You don't want to be able to unselect all the elements,
so no need for "val.checked = !val.checked". Also, this function is so
simple, that you might as well inline it.

Instead of using a span, you should use the element that is meant for
exactly this: label.

<label style="cursorointer;cursor:hand;"
onclick="document.forms['oracle'].elements['products'][0].click()">
<input type="radio" name="products" value="Database" onClick="loadOptions()">
Database
</label>

(I always write my form references out with "forms" and "elements"
collections.)

You also use "eval" in one other place:
category = eval(selectChoice + "_" + radioChoice);
This can be changed to the much faster and non-eval-using:
category = window[selectChoice + "_" + radioChoice];

Good luck
/L

 

[Kevin Lyons]

Lasse,

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

I have made more modifications to the code. The Div code is still
giving me problems. It is still 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.

I have the courses value now getting passed to the results page;
however, how 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 anyone has any questions.

Thanks much,

Kevin

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

(e-mail address removed) (Kevin Lyons) writes:

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Kevin Lyons]

Lasse,

The message prior to this one was never posted from Google.com. I
will resend it again:

Lasse,

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) The latest reset code had given 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 commented 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?

Another suggested the following:

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, the other individual mentioned 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?

Since this posting I added this note:

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.

And this last update:

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

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

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

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

Kevin

Lasse,

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

I have made more modifications to the code. The Div code is still
giving me problems. It is still 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.

I have the courses value now getting passed to the results page;
however, how 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 anyone has any questions.

Thanks much,

Kevin

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


(e-mail address removed) (Kevin Lyons) writes:

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Kevin Lyons]

Lasse,

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

Lasse,

The message prior to this one was never posted from Google.com. I
will resend it again:

Lasse,

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) The latest reset code had given 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 commented 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?

Another suggested the following:

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, the other individual mentioned 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?

Since this posting I added this note:

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.

And this last update:

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

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

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

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

Kevin

Lasse,

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

I have made more modifications to the code. The Div code is still
giving me problems. It is still 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.

I have the courses value now getting passed to the results page;
however, how 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 anyone has any questions.

Thanks much,

Kevin


(e-mail address removed) (Kevin Lyons) wrote in message 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


(e-mail address removed) (Kevin Lyons) writes:

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 can see some problems.

1: <SCRIPT LANGUAGE="JavaScript">
In HTML 4, the type attribute is required on script tags:
<script type="text/javascript">

2: onload="acceptParams(this.location.search)"
The location object is not a property of the body element (not in all
browsers, at least), so drop "this.".

3: Start = Stop+2+"products".length
This doesn't associate as you thinkt it does. Add parentheses:
Start = Stop+2+("products".length)
Same for the next Start.

4: Stop = Invar.length
So the products go on until the end of the string. That's the reason it's
not split. You don't split it.

4: You assume that the parameters are passed in the order: country,
products, courses. There is nothing in the HTML or HTTP definitions that
require a form's elements passed with the GET method to be in the same
order as on the page.

What I would do:
---
function acceptParams(paramStr) {
var params = new Object();
var pairs = paramStr.substring(1).split("&");
for (var i in pairs) {
var pair = pairs.split("=");
params[pair[0]] = unescape(pair[1].replace(/\+/g," "));
}
document.write("Countries = " + params.Countries + "<br>");
document.write("Products = " + params.products + "<br>");
document.write("Courses = " + params.courses + "<br>");
}
---
(This is not a completely general parsing of passed form elements. It
doesn't handle multiple elements with the same name (like checkboxes
or radiogroups), and it doesn't handle input with type="image" (which
sends "name.x=42&name.y=27" or similar).

/L

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen

Lines: 204

Lasse,

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


(e-mail address removed) (Kevin Lyons) wrote in message (e-mail address removed)>...

First, read the FAQ. All of it, but especially section 2.3 paragraph 5
sentence 6.

Personal correspondence should go by E-mail; articles here are for
anyone to read.