Solved

Marking an option as "Selected"

Posted on 2009-05-20
50
1,391 Views
Last Modified: 2012-05-07
I've got an application that uses JavaScript to create a series of dynamic dependent listboxes.  It's working great but I'd like to be able to preserve the selected options in the event of an error.  Basically, I've got a VBScript function which stores the form fields to a database and then one which recalls that information on the redirected page so that the user submitted values can be preserved.

Here's what I've got for the JavaScript that creates the select options:

function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
 oList.selectedIndex = 0;
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}

Those functions are called in the HTML like so:
<select name="formBuilding" id="formBuilding" onChange="MM_callJS('setDynaList(arrDL1)')">
     <option value="">Please Select</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
</select>
<select name="formSpace" id="formSpace" onChange="MM_callJS('setDynaList(arrDL2)')">
</select>
<select name="formSuite" id="formSuite">
</select>

So in this case, formBuilding is the parent to formSpace, which in turn is the parent to formSuite.  In the event of an error, such as the user leaving a field blank, I'd like to apply selected="selected" to the user-selected item.

Thanks to anyone who can help!
0
Comment
Question by:saoirse1916
  • 26
  • 24
50 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24434946
When you modify the selectedIndex attribute of a SELECT element, the "proper" option is selected.

Note: This only works for single select, not multiple select elements.
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24434955
I'm not sure what you mean -- could you post a code sample?  I'm terrible at JavaScript.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24435066
sure.  Sorry.

Where would the code be that identifies the options to be selected?
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24435244
It's in VBScript, but as an example, here's what I do:

<option value=""<% If CStr(checkData("formAssetType","")) = "" Then %> selected<% End If %>>Please Select</option>

"checkData" is a function that looks at the redirected data "formAssetType" and if there's a value there it uses it as it's matching criteria -- otherwise it looks to the second value which in this case is blank.
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24435255
So basically, I need that code to be included in the above JavaScript which dynamically writes the select and it's options.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24436341
The problem is that after the VBscript executes, the Document Object Model (DOM) of the page doesn't look like that anymore.

If you look at the page source (in the browser, if you right-click on the page, "view source" or something like it).  The question though is:

Does this source reflect the actual DOM after the script changes, or not?


0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24436511
Well, I don't have that VBScript in the page at the moment -- the JavaScript is currently called from an external .js file.  So, perhaps I should stick that .js code into the page itself and use VBScript to do the if/then check -- but assuming I do that, how would I modify the JavaScript to reference that "selected" option?

If I do this, for example (keeping in mind that I don't know much about JS)...

function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
<%
If CStr(checkData("formAssetType","")) = [somehow need to get the current JS option item in the arrray here] Then
     --JS code to identify the item as "selected"
End If


 oList.selectedIndex = 0;
}
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437067
The JavaScript code to identify an item is selected is as simple as:

For example, if index has a value of 3, the 4th element (remember container indexes start at 0) will be selected...
olist.selectedIndex = index

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24437076
For example:
<html>

<body>
 

<select id='here'>

  <option>Pick...</option>

  <option>Uno</option>

  <option>Dos</option>

  <option>Tres</option>

</select>
 

<script type="text/javascript">

document.getElementById( 'here' ).selectedIndex = 2

</script>
 

</body>

</html>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24440862
It seems that my question is really about how to properly integrate a VBScript if/then with this JavaScript.  I've got the initial drop down set to preserve the first selected item (the parent, formBuilding) purely through VBScript but now I need to figure out how to do the same with the VBScript dependent drop down (child, formSpace) after a redirect.  My form gets submitted to a processing page and if there's an error, it bounces back to the form page which is where I need to preserve the submitted value.

I'm still not clear on how I could use "olist.selectedIndex = index" to identify the selected item in a dynamically created list of options.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24441032
>> I'm still not clear on how I could use "olist.selectedIndex = index" to identify the selected item in a dynamically created list of options.

Given that "olist" is a reference to a "SELECT" element,
changing the selectedIndex value is the same as looping through the options to locate the entry in question, and changing it's selected attribute.

Does that make sense?

Does this help?
<html>

<head>

<script type="text/javascript">

function pick( id, index ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      if ( ( index > -1 ) && ( index < sel.options.length ) ) {

        sel.selectedIndex = index

      } else {

        alert( 'Invalid selection.  Must be 0..' + ( sel.options.length - 1 ) )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

</script>

</head>

<body>

 

<select id='here'>

  <option>Pick...</option>

  <option>One</option>

  <option>Two</option>

  <option>Three</option>

  <option>Four</option>

  <option>Five</option>

</select><br>

Item #: <input type='text' size='1' onchange='pick("here",this.value)'>

 

</body>

</html>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24442052
Ok, I see.  So then in theory I could add this function to my onLoad event -- which is currently calling the dynamic drop down functions to pre-populate the lists -- but when I do that I'm getting a syntax error.  Here's what I'm doing...

<body onLoad="MM_callJS('setDynaList(arrDL1)');MM_callJS('setDynaList(arrDL2)');pick("formSpace",<%=checkData("formSpace","")%>)">

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24442521
My html editor complains about the capital L in onLoad.  It want all lowercase.
But at least one browser (Chrome) doesn't care, and lets the string be executed.

Instead of having both JavaScript, and VBscript in the onload, you may want/need to call a single/simple function.

The "pick" call seems to have mismatched double-quotes though...
<head>

<script type='text/javascript'>

  function init() {

    MM_callJS('setDynaList(arrDL1)')

    MM_callJS('setDynaList(arrDL2)')

    pick("formSpace",<%=checkData("formSpace","")%>)"

  }

</script>

</head>

<body onload='init()'>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24442648
Now I'm getting two errors:
Error: syntax error
pick("formSpace",) -- pointing to the last close-parentheses

init is not defined

Not sure what I'm doing wrong here.
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24442673
Actually, when I submit the form it does bounce back but it throws me a pop-up..."Invalid selection.  Must be 0..6".  I see where that's coming from in the function but it occurs to me that the function is looking for a JS index value, correct?  What I'm giving it is the actual value.  That's what my VBScript function is providing.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24442972
I believe that VBScript is replacing the

<%=checkData("formSpace","")%>

with the a value.

What happens if you change init() to something like:

Does it execute, and provide the expected "value = #" response?
  function init() {

    MM_callJS('setDynaList(arrDL1)')

    MM_callJS('setDynaList(arrDL2)')

//  pick("formSpace",<%=checkData("formSpace","")%>)"

    alert( 'value: ' +  <%=checkData("formSpace","")%> )

  }

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24443720
It's throwing up the value of the selected item, not the index.  It's an integer value which is the unique ID of the record in the database.  Basically, it's the 123 in this value:

<option value="123">First Floor</option>

Based on that, I need to either write a VBScript function to look up what that index value *would* be on the checking page and store that value in the database for recall on the calling page, or have the JavaScript match that option value somehow.  I have no idea how to do that in JavaScript nor do I know if that would even be possible or a good idea.

What do you think?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24443866
No, now that we know what is being passed, we can change the pick() function to handle it.

How about something like this:
<script type="text/javascript">

function pick( id, val ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      var SI = -1

      for ( var i = 0; i < sel.options.length; i++ ) {

        if ( val == sel.options[ i ].value ) {

          sel.options[ i ].selected = true

          SI = i

          break

        }

      }

      if ( SI == -1 ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

</script>

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24443912
Slightly simpler would be:
<script type="text/javascript">

function pick( id, val ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      for ( var i = 0; i < sel.options.length; i++ ) {

        if ( val == sel.options[ i ].value ) {

          sel.options[ i ].selected = true

          break

        }

      }

      if ( i == sel.options.length ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

</script>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24443979
Interesting...it's saving the value perfectly now.  I also tried to apply the same concept to my other dynamic drop down (formSuite) but it's popping up an alert saying that the Specified value not found: and it's reporting the proper ID value just like it did for the first one (formSpace).  Here's what I did, perhaps I goofed something up.

Also, I'm still getting a JavaScript error in Firefox though it doesn't seem to be causing any significant problems:

Syntax error: pick("formSpace",)
init is not defined
<script type="text/javascript">

  function init() {

    MM_callJS('setDynaList(arrDL1)')

    MM_callJS('setDynaList(arrDL2)')

	pick("formSpace",<%=checkData("formSpace","")%>)

	pick("formSuite",<%=checkData("formSuite","")%>)

  }

</script>

<body onload="init()">

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24444021
So, for the 1st (formSpace) it works, but for the 2nd (formSuite) it doesn't?

Do both of the Select groups have OPTION tags with value=?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24444028
What browser & version are you using?
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24444051
I'm using Firefox 3.0.10 -- both select groups are dynamically created by the initial script that I posted, so they should be the same I suppose.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24444055
I wonder if this would work for you...
<script type="text/javascript">

function pick( id, val ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      for ( var i = 0; i < sel.options.length; i++ ) {

        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {

          sel.options[ i ].selected = true

          break

        }

      }

      if ( i == sel.options.length ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

</script>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24444090
Hmm, didn't seem to make any difference.  Same errors and it still pops up saying that the value cannot be found -- yet it is reporting the correct unique ID for that suite.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 41

Expert Comment

by:HonorGod
ID: 24444213
How big a list?

If it't not too big, we can add an alert to the loop to show us what is being tested:



<script type="text/javascript">

function pick( id, val ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      for ( var i = 0; i < sel.options.length; i++ ) {

        var data = sel.options[ i ].value || sel.options[ i ].innerHTML

        alert( 'val = "' + val + '"  sel.option: "' + data + '"' )

        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {

          sel.options[ i ].selected = true

          break

        }

      }

      if ( i == sel.options.length ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

</script>

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24444430
It throws up several alerts....
val="256" sel.option: "253"
val="256" sel.option: "6001"
val="256" sel.option: "255"
val="256" sel.option: "256"
val="3726" sel.option: "[none available]"
Specified value not found: 3726

256 corresponds to the ID for the option I selected in formFloor, but I'm not sure about the other numbers.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24444581
I'm confused that the penultimate option match didn't occur...
Unless, one is an integer and the other a string...

How about adding the following statement just after the

var sel = document.getElementById( id )

Do you still get the "not found" error?
val = val.toString()

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24444611
Yes, same error.  It matches the space but not the suite (the first one, but not the second).
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24444698
As an update, I ran it again and checked the values that your earlier debugging efforts provided.  The first one is (in this case) val = "275" sel.option: "267"  That val is the spaceID unique ID field.  I have no idea where 267 is coming from.  The next is val = "275" sel.option: "6003".  I looked in my database and I have neither a space nor a suite with an ID of 6003, so I'm not sure what that's coming from either.

However, the next run of alerts which start with val = "275" sel.option: "269" then proceed up to sel.option: "270", "271", and so on.  It's running through the available spaces.  Once it gets to "275", I get the alert val = "3862" sel.option: "[none available]".  3862 is the ID for the selected suite.

Does this mean anything to you?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24446958
Well, the "val" is what is passed in as a parameter, and the sel.option is what is encountered during each iteration (i.e., each option value).

Take a look at the (monspaced font) below..



The next alert(), i.e.,

val = "3862" sel.option: "[none available]".

must be coming from the next call to pick()... is all I can figure.

Does this make sense?

We may need to "dump" the whole select to see what it actually contains.
How many values are we talking about?

val | sel.option |

----+------------+---

275 | 267        | options[ 0 ] - no match, keep looking

275 | 6003       | options[ 1 ] - no match, keep looking

275 | 269        | options[ 2 ] - no match, keep looking

...

275 | 275        | options[ 8 ] - match, loop is done...
 

That entry (i.e., options[ 8 ]) should be "selected", and pick() should return to the calling routine.

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24446963
Please provide the whole page, so I can take another look at what it contains.

Thanks

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24450361
There are quite a few values -- basically each building can have 10 floors (formSpace) and each floor can have 10-20 suites (formSuite).  Here's what's in my HTML (ASP) page at the moment:

<script language="JavaScript" src="/scripts/dropdown.js"></script>
<%
'      Call the first dropdown (Building -> Space)
createDropdown 1,"formBuilding","formAsset","formSpace","formAsset",2,1,0,arrSpace
'      Call the second dropdown (Space -> Suite)
createDropdown 2,"formSpace","formAsset","formSuite","formAsset",2,1,0,arrSuite
%>
</head>
<script type="text/javascript">
  function init() {
    MM_callJS('setDynaList(arrDL1)')
    MM_callJS('setDynaList(arrDL2)')
      pick("formSpace",<%=checkData("formSpace","")%>)
      pick("formSuite",<%=checkData("formSuite","")%>)
  }
</script>
<body onload="init()">

Here's the included javascript file dropdown.js:

// Dynamic drop-down list generic functions

function pick( id, val ) {
  var sel = document.getElementById( id )
  if ( sel ) {
    if ( sel.nodeName == 'SELECT' ) {
      for ( var i = 0; i < sel.options.length; i++ ) {
        var data = sel.options[ i ].value || sel.options[ i ].innerHTML
        alert( 'val = "' + val + '"  sel.option: "' + data + '"' )
        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {
          sel.options[ i ].selected = true
          break
        }
      }
      if ( i == sel.options.length ) {
        alert( 'Specified value not found: ' + val )
      }
    } else {
      alert( 'Unexpected element type: "' + sel.nodeName + '"' )
    }
  }
}


function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]","");
 }
 
 oList.selectedIndex = 0;
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}


Those functions are called by the select object like so:

<label for="formBuilding"><%=errorLabel("Building:","e7",1)%></label>
                              <select name="formBuilding" id="formBuilding" onChange="MM_callJS('setDynaList(arrDL1)')"<%=errorFormField("e7","select","")%>>
                                    <% If IsArray(arrBldg) = True Then %>
                                          <option value=""<% If CStr(checkData("formBuilding","")) = "" Then %> selected<% End If %>>Please Select</option>
                                          <% For i = 0 to uBound(arrBldg,2) %>
                                                <option value="<%=arrBldg(0,i)%>"<% If CStr(checkData("formBuilding","")) = CStr(arrBldg(0,i)) Then %> selected<% End If %>><%=arrBldg(1,i)%></option>
                                          <% Next
                                    Else %>
                                          <option value="">ERROR: No Buildings Established</option>
                                    <% End If %>
                              </select>
                              <br class="clear">
                              <label for="formSpace"><%=errorLabel("Floor/Space:","e8",1)%></label>
                              <select name="formSpace" id="formSpace" onFocus="MM_callJS('setDynaList(arrDL2)')" onChange="MM_callJS('setDynaList(arrDL2)')"<%=errorFormField("e8","select","")%>>
                              </select>
                              <br class="clear">
                              <label for="formSuite"><%=errorLabel("Suite:","e9",0)%></label>
                              <select name="formSuite" id="formSuite"<%=errorFormField("e9","select","")%>>
                              </select>
                              <br class="clear">
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24450606
One thing that I see is related to your "clearDynaList()" function.

It doesn't really delete the options array entries, so if the number of options to be added next is less than what was there previously, you will have some null entries at the end of the list.

So, it would be better to use something like the code below.

However, this still doesn't explain the unexpected values seen earlier.

Would you consider adding an empty debug div at the bottom of your page so that we could display information about the select contents?

If so, add this to the bottom of your HTML, i.e., just before </body>

<div id='debug'></div>

and then we could add something like the dumpSel() routine below.

Then, all you would need to do to display the contents of the select (as far as the pick() function was concerned) would be to have a statement like:

dumpSel( oList1 )
function clearDynaList(oList){

  oList.options.length = 0

  oList.selectedIndex = -1;

}
 

function dumpSel( sel ) {

  var debug = document.getElementById( 'debug' )

  if ( debug ) {

    if ( sel && sel.nodeName == 'SELECT' ) {

      debug.innerHTML = ''

      for ( var i = 0; i < sel.options.length; i++ ) {

        var val = sel.options[ i ].value || sel.options[ i ].innerHTML

        debug.innerHTML += 'options[ ' + i + ' ] = "' + val + '"<br>'

      }

    } else {

      alert( ( sel ) ? 'Required parameter not specified.' : ( 'Unexpected element parameter specified: ' + sel.nodeName ) )

    }

  } else {

    alert( '"debug" element not found.' )

  }

}

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24450748
When I try to call that function I get an error: oList1 is not defined.  I've tried putting that function in the included Javascript file in several places as well as in the ASP page itself.  Is it possible that I'm putting it in the wrong place?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24450835
yeah.

I used the variable name from your code as an example.
where you used oList1 and oList2 as references to different select lists.

You could easily do something like this:
dumpSel( document.getElementById( 'formBuilding' )
 

or 
 

dumpSel( document.getElementById( 'formSpace' )

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24450843
oops, don't forget to close the parenthesis... sorry
dumpSel( document.getElementById( 'formBuilding' ) )

 

or 

 

dumpSel( document.getElementById( 'formSpace' ) )

Open in new window

0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24451336
Ahh, I see.  When I run the it for formSpace I get this:
options[ 0 ] = "197"
options[ 1 ] = "198"
options[ 2 ] = "199"
options[ 3 ] = "200"
options[ 4 ] = "209"
options[ 5 ] = "210"
options[ 6 ] = "5989"
options[ 7 ] = "5990"

Those are the proper spaceID values for the formSpace drop-down.  When I run it for formSuite I get this:

options[ 0 ] = "3693"
options[ 1 ] = "3836"
options[ 2 ] = "3979"

Those are also the correct suiteID values.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24453150
So those should be the values that are processed by the pick() routine.

When pick() is being called, you should get an alert() telling you these same values in this order.

Is that what you are seeing?

Is the value that was passed (i.e., the "val = " value) what you expect?

What's happening, or not happening, at this point that we need to attack?
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24453914
Yes, I do get those alerts.  The last one though is always Specified value not found: 3693.  I picked the first suite which corresponds to that 3693 ID number.  Basically, the routine works perfectly on the formSpace drop-down -- when the page redirects back to the form the space that I picked is still highlighted.  However the suite is not.

One other thing just occurred to me: when it redirects back the space is selected but the suite says [none available] and there are no options at all.  I need to reselect the floor by picking another floor which then populates the suites list.  If my logic is correct, this would mean that the pre-selecting of the formSpace option is *not* triggering the population of the formSuite list.  I checked the source at runtime and it *is* creating the array properly however.  So I'm a bit confused.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24454142
I think that you have that issue identified.

When you say: "when it <the page?> redirects back the space is selected but the suite says [none available] and there are no options at all."

So, we may need to use a session cookie (or something) to keep track of the "floor" so that when the "redirection back to the page" occurs, then the saved floor number can be used to cause the population of the select statement to occur.

Does that make sense?
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24454524
We'll, what I'm doing is on the processing page I've got a function that saves all the submitted form values to a database.  Those are then recalled via another function on the submitting page -- the one I'm redirecting back to -- it's evidently working well since it's doing the proper display on the formSpace field.  That's what my VBScript function does that I'm using when calling the pick function.  I think I just need a way to have that pre-selected space trigger the suite drop-down and then have the pick function pre-select the suite.

Is there a way to do that?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455088
I'll have to think on that, and get back to you.

The kids are hungry, and I need to get something for everyone to eat.  :-)
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24455930
>> We'll, what I'm doing is on the processing page I've got a function that saves all the submitted form values to a database.

  ok, so far, so good.

>> Those are then recalled via another function on the submitting page -- the one I'm redirecting back to -- it's evidently working well since it's doing the proper display on the formSpace field.

  ok, I'm following you... at least I think I am.

>>  That's what my VBScript function does that I'm using when calling the pick function.

  ok,  sounds reasonable

>> I think I just need a way to have that pre-selected space trigger the suite drop-down and then have the pick function pre-select the suite.

  Hm.  I wonder if we could save a cookie value in JavaScript, and have the VBscript look for the cookie when it loads, and use it to change the selected value and load the data accordingly.

  How does that sound?
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24482915
If you think that will work, it sounds good to me -- I don't know the code for setting a cookie in JS though.  Also, I'm basically doing the same thing when calling my VBScript function "checkData".  It's looking into an array created from a database in an earlier call to then find a match.  I'm not sure how using JavaScript to set a cookie would be any different but I'll be happy to try it out.
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24483747
Just a thought, is there a way to trigger the MM_callJS function (which I'm currently calling with onLoad and onChange) during the pick function?  Something like the code below?  In that example I'm adding a "list" parameter where I'll pass arrDL1 or arrDL2 (DL2 in this case) which would trigger that function.  I've tried this and it doesn't work but perhaps I've got my code out of order or something.  Any thoughts?

function pick( id, val, list ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      for ( var i = 0; i < sel.options.length; i++ ) {

        var data = sel.options[ i ].value || sel.options[ i ].innerHTML

        // alert( 'val = "' + val + '"  sel.option: "' + data + '"' )

        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {

          sel.options[ i ].selected = true

		  if ( list != '') {

			MM_callJS(setDynaList(list))

		  }

          break

        }

      }

      if ( i == sel.options.length ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24485438
Q: How do I "set a cookie value"?
A: The attached files demonstrate how to set & read cookie values.

According to http://www.experts-exchange.com/Q_24425495.html#a24450361,
MM_callJS() is a simple JavaScript function expecting

What is MM_callJS() that evaluates the specified "statement".  So, the statement that you have, i.e.,

MM_callJS(setDynaList(list))

may have a problem because of the fact that list is a parameter value passed to pick().  What is being passed?

cookie.js.txt
CookieTest.html.txt
0
 
LVL 8

Author Comment

by:saoirse1916
ID: 24486055
Here are the functions that I've got so far -- the first three are saved in an included dropdown.js file, and the pick() function is coded directly in the page surrounded by <script> tags.  Is it possible that I've got things out of order?
function setDynaList(arrDL){

 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];

 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];

 var arrList = arrDL[5];

 

 clearDynaList(oList2);

 

 if (oList1.selectedIndex == -1){

  oList1.selectedIndex = 0;

 }

 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);

 return true;

}

 

function clearDynaList(oList){

  oList.options.length = 0

  oList.selectedIndex = -1;

}

 

function populateDynaList(oList, nIndex, aArray){

 for (var i = 0; i < aArray.length; i= i + 3){

  if (aArray[i] == nIndex){

   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);

  }

 }

 if (oList.options.length == 0){

  oList.options[oList.options.length] = new Option("[none available]","");

 }

 

 oList.selectedIndex = 0;

}
 

function MM_callJS(jsStr) { //v2.0

  return eval(jsStr)

}
 

function pick( id, val, list ) {

  var sel = document.getElementById( id )

  if ( sel ) {

    if ( sel.nodeName == 'SELECT' ) {

      for ( var i = 0; i < sel.options.length; i++ ) {

        var data = sel.options[ i ].value || sel.options[ i ].innerHTML

        // alert( 'val = "' + val + '"  sel.option: "' + data + '"' )

        if ( val == ( sel.options[ i ].value || sel.options[ i ].innerHTML ) ) {

          sel.options[ i ].selected = true

		  if ( list != '') {

			MM_callJS(setDynaList(list))

		  }

          break

        }

      }

      if ( i == sel.options.length ) {

        alert( 'Specified value not found: ' + val )

      }

    } else {

      alert( 'Unexpected element type: "' + sel.nodeName + '"' )

    }

  }

}

Open in new window

0
 
LVL 8

Author Closing Comment

by:saoirse1916
ID: 31583653
I'm accepting this solution since you have solved my initial question.  Thanks so much!  I'm posting a new question to deal with the secondary problem I'm running into.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24537446
Thank you for the grade & points.

Good luck & have a great day
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now