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

Discussion in 'Javascript' started by Kevin Lyons, Oct 4, 2003.

  1. Kevin Lyons

    Kevin Lyons Guest

    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
     
    Kevin Lyons, Oct 4, 2003
    #1
    1. Advertising

  2. In article <>,
    says...
    > 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

    --
    Hywel I do not eat quiche
    http://hyweljenkins.co.uk/
    http://hyweljenkins.co.uk/mfaq.php
     
    Hywel Jenkins, Oct 4, 2003
    #2
    1. Advertising

  3. Kevin Lyons

    DU Guest

    Kevin Lyons wrote:
    > 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
     
    DU, Oct 4, 2003
    #3
  4. (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
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 4, 2003
    #4
  5. Kevin Lyons

    Kevin Lyons Guest

    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


    Lasse Reichstein Nielsen <> wrote in message news:<>...
    > (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, Oct 5, 2003
    #5
  6. Kevin Lyons

    Kevin Lyons Guest

    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


    Lasse Reichstein Nielsen <> wrote in message news:<>...
    > (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, Oct 5, 2003
    #6
  7. (Kevin Lyons) writes:

    > 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="cursor:pointer;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
    --
    Lasse Reichstein Nielsen -
    Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Oct 5, 2003
    #7
  8. Kevin Lyons

    Kevin Lyons Guest

    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


    (Kevin Lyons) wrote in message news:<>...
    > 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
    >
    >
    > Lasse Reichstein Nielsen <> wrote in message news:<>...
    > > (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, Oct 5, 2003
    #8
  9. Kevin Lyons

    Kevin Lyons Guest

    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


    Lasse Reichstein Nielsen <> wrote in message news:<>...
    > (Kevin Lyons) writes:
    >
    > > 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="cursor:pointer;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, Oct 6, 2003
    #9
  10. Kevin Lyons

    Kevin Lyons Guest

    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


    (Kevin Lyons) wrote in message news:<>...
    > 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
    >
    >
    > (Kevin Lyons) wrote in message news:<>...
    > > 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
    > >
    > >
    > > Lasse Reichstein Nielsen <> wrote in message news:<>...
    > > > (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, Oct 6, 2003
    #10
  11. Kevin Lyons

    Kevin Lyons Guest

    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


    (Kevin Lyons) wrote in message news:<>...
    > 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
    >
    >
    > (Kevin Lyons) wrote in message news:<>...
    > > 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
    > >
    > >
    > > (Kevin Lyons) wrote in message news:<>...
    > > > 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
    > > >
    > > >
    > > > Lasse Reichstein Nielsen <> wrote in message news:<>...
    > > > > (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, Oct 7, 2003
    #11
  12. Kevin Lyons

    Kevin Lyons Guest

    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


    (Kevin Lyons) wrote in message news:<>...
    > 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
    >
    >
    > (Kevin Lyons) wrote in message news:<>...
    > > 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
    > >
    > >
    > > (Kevin Lyons) wrote in message news:<>...
    > > > 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
    > > >
    > > >
    > > > (Kevin Lyons) wrote in message news:<>...
    > > > > 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
    > > > >
    > > > >
    > > > > Lasse Reichstein Nielsen <> wrote in message news:<>...
    > > > > > (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, Oct 7, 2003
    #12
  13. JRS: In article <>, seen
    in news:comp.lang.javascript, Kevin Lyons <> posted at
    Tue, 7 Oct 2003 02:33:05 :-

    >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
    >
    >
    > (Kevin Lyons) wrote in message news:<63f7f9f4.0310062222.4511
    >>...
    >> Lasse,
    >>
    >> The message prior to this one was never posted from Google.com. I
    >> will resend it again:
    >>
    >> ...


    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.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.
     
    Dr John Stockton, Oct 7, 2003
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J. Hall
    Replies:
    2
    Views:
    1,106
    Jeff Thies
    Apr 21, 2004
  2. Robert Cohen
    Replies:
    3
    Views:
    295
    Andrew Durstewitz
    Jul 15, 2003
  3. Davide Bruzzone
    Replies:
    2
    Views:
    261
    Davide Bruzzone
    Aug 4, 2003
  4. palmiere
    Replies:
    1
    Views:
    452
    Erwin Moller
    Feb 9, 2004
  5. Duke
    Replies:
    1
    Views:
    178
    Tom de Neef
    Apr 18, 2008
Loading...

Share This Page