Applying users listbox selection when writing back to client

[philip.morgan]

I am trying to set a listbox selectedIndex value when writing back to
the client from the server side.

On the client-side form, an onChange event grabs a listbox's value,
length and selectedIndex and then populates individual hidden form
fields in my .asp file (works great). As well, I loop through the
select options and build an html string that is also passed to a
hidden field (also working fine).

=== end code ===
//--- length ---
var str_ReportType_length =
document.getElementById("lbx_ReportType").length
document.getElementById("fld_ReportType_length").value =
str_ReportType_length
//--- selectedIndex ---
var str_ReportType_selectedIndex =
document.getElementById("lbx_ReportType").selectedIndex
document.getElementById("fld_ReportType_selectedIndex").value =
str_ReportType_selectedIndex
//--- value selected ---
var str_ReportType_selected =
document.getElementById("lbx_ReportType").value;
document.getElementById("fld_ReportType_selected").value =
str_ReportType_selected
//--- retrieve the options and build an HTML string ----
var str_ReportType_options = "";
var obj_ReportType = document.getElementById("lbx_ReportType");
for (i=0;i<obj_ReportType.options.length;i++) {
var arr_ReportType = obj_ReportType.options;
str_ReportType_options = str_ReportType_options + "<option value = " +
'"' + arr_ReportType.value + '"' + ">" + arr_ReportType.innerHTML; }
str_startselectHTML ="<select name=" + strQuote + "lbx_ReportType" +
strQuote + " onChange=" + strQuote + "lbx_ReportTypeSelect()" +
strQuote + ">";
var blt_ReportType_options = str_startselectHTML +
str_ReportType_options + str_endselectHTML
document.getElementById("fld_ReportType_options").value =
blt_ReportType_options;
=== end code ===

A response.write demonstrates all the values were captured, moved up
from the client to the server, and then back to rebuild the client
page (e.g. submit). No problem there.

*** Question *** ??
If the user has selected number 3 out of 5 items of the .asp form, how
do rebuild the listbox with the user's selection displayed? I've tried
a number of ways... unsuccessfully.

*** Attempted Solutions ****
For example, I tried setting it on the server side. I obtained the
value from the hidden field transferring the selectedIndex from the
client side (strSelectedIndex):
<% Dim obj_lbx_ReportType
obj_lbx_ReportType = document.GetElementById("lbx_ReportType")
lbx_ReportType.selectedIndex = strSelectedIndex.
%>
Of course, I couldn't set a client side object value on the server
side.......

I've also tried to set a <option = "some value" SELECTED>something</
option> when writing it to/from the client/server. However, this
causes problems when the user repeats the selection... the onChange
fires again and..... you get the picture.

Similarly, setting a flag in a JavaScript function to change the
listbox when writing back causes problems with repeat selection/
submits.

Perhaps a permanent function at the client side that triggers somehow.
I'm out of ideas here.

If you've done this before, please let me know how!

Many thanks.

Phil "My brain is full" Morgan

 

[Bob Barrows [MVP]]

I am trying to set a listbox selectedIndex value when writing back to
the client from the server side.

ASP generates HTML. When you write the OPTION tags, you have to set the
SELECTED attributes for the options that need to be selected.
If ASP was not involved, and you were writing the html for a listbox
that had several items pre-selected, how would you write that html? Once
you know what it's supposed to look like, modify your server-side script
to generate similar html.

 

[CodeGrinder]

ASP generates HTML. When you write the OPTION tags, you have to set the
SELECTED attributes for the options that need to be selected.
If ASP was not involved, and you were writing the html for a listbox
that had several items pre-selected, how would you write that html? Once
you know what it's supposed to look like, modify your server-side script
to generate similar html.

--
Microsoft MVP -- ASP/ASP.NET
Please reply to the newsgroup. The email account listed in my From
header is my spam trap, so I don't check it very often. You will get a
quicker response by posting to the newsgroup.

Hi Bob:

Thank you for taking the time to respond to my post. Your reply served
to restate my question - how do I set the SELECTED value when writing
back to the client (or in the alternative set the selectedIndex). You
will note that I discussed this issue in my post.

Do you know HOW to do this? Thanks.

 

[CodeGrinder]

here's a sample to follow:

http://www.webconcerns.co.uk/asp/combo/combo.asp

Hi Jon:

Thanks for the reply. However, my question is how to set the SELECTED
value from the server to the client, or in the alternative, set the
selectedIndex value.

Your link discusses a build from an ADODB build and setting the
SELECTED value. Not really applicable, since my code describes a
submit from client to server. I just want to return the listbox with
the same selection that user made.

Any ideas?

 

[Bob Barrows [MVP]]

Hi Bob:

Thank you for taking the time to respond to my post. Your reply served
to restate my question - how do I set the SELECTED value when writing
back to the client (or in the alternative set the selectedIndex). You
will note that I discussed this issue in my post.

Do you know HOW to do this? Thanks.

You write it to Response as you wrie the html that creates the option tags.

Again, ASP has no "contact" with client elements other than writing the html
that creates them, so push all thoughts of "selectedIndex" out of your mind.
It would be something like this (air code for illustration purposes):

Response.Write "<option value=""" & somevalue & """"

If <somevalue is in list of values submitted> then
Response.Write " selected"
end if
Response.write ">"

 

[VK]

I've also tried to set a <option = "some value" SELECTED>something</
option> when writing it to/from the client/server. However, this
causes problems when the user repeats the selection... the onChange
fires again and..... you get the picture.

Truly say, I didn't. Evidently onchange handler will be called on each
selection change, moreover it will be called on each list scroll on
some browsers if arrow keys are used instead of mouse: many users
prefer this option plus tab navigation. If you don't like that then
simply do not allow selection change on the next screen. Let users
have to go to the previous screen via provided link if they need to
correct any of previous inputs.
So you did everything right so far except note the proper <option>
syntax:

<select name="select" onchange="
myChangeListener(
this.selectedIndex,
this.options[this.selectedIndex].value);
">
<option value="val01" selected>Value 1</option>
<option value="val02">Value 2</option>
<option value="val03">Value 3</option>
</select>

From the usability point of view onchange in select is a nightmare for
the reason I spelled a bit above. It is much better to attach all form-
related actions to form onsubmit handler itself.

 

[CodeGrinder]

You write it to Response as you wrie the html that creates the option tags..

Again, ASP has no "contact" with client elements other than writing the html
that creates them, so push all thoughts of "selectedIndex" out of your mind.
It would be something like this (air code for illustration purposes):

Response.Write "<option value=""" & somevalue & """"

If <somevalue is in list of values submitted> then
    Response.Write " selected"
end if
Response.write ">"

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"- Hide quoted text -

- Show quoted text -

Aha! I understand what you mean. Like this....

var obj_ReportType = document.getElementById("lbx_ReportType");
for (i=0;i<obj_ReportType.options.length;i++)
{
var arr_ReportType = obj_ReportType.options;

if(arr_ReportType.value ==
document.getElementById("fld_ReportType_selected").value)
{
//alert('got a match between the array element and the option
selected');
str_ReportType_options = str_ReportType_options + "<option value = " +
'"' + arr_ReportType.value + '"' + "SELECTED>" +
arr_ReportType.innerHTML;

}
else
{
//alert('NO match ' + arr_ReportType.value);
str_ReportType_options = str_ReportType_options + "<option value = " +
'"' + arr_ReportType.value + '"' + ">" + arr_ReportType.innerHTML;
}
}

Works great. Thanks!

 

[CodeGrinder]

same concept, as you build your dropdown list look for values  matching those retrieved from user choices .
When found, mark as SELECTED.  if not found, don't mark

Thanks Jon. I found this works....

var obj_ReportType = document.getElementById("lbx_ReportType");
for (i=0;i<obj_ReportType.options.length;i++)
{
var arr_ReportType = obj_ReportType.options;

if(arr_ReportType.value ==
document.getElementById("fld_ReportType_selected").value)
{
//alert('got a match between the array element and the option
selected');
str_ReportType_options = str_ReportType_options + "<option value = " +
'"' + arr_ReportType.value + '"' + "SELECTED>" +
arr_ReportType.innerHTML;

}
else
{
//alert('NO match ' + arr_ReportType.value);
str_ReportType_options = str_ReportType_options + "<option value = " +
'"' + arr_ReportType.value + '"' + ">" + arr_ReportType.innerHTML;
}
}

Often the concepts get blurred in details. Your help is appreciated.

 

[Bob Barrows [MVP]]

Aha! I understand what you mean. Like this....

var obj_ReportType = document.getElementById("lbx_ReportType");
for (i=0;i<obj_ReportType.options.length;i++)

Actually no, I didn't mean anything of the sort. I posted some server-side
code to generate the html. You've used client-side code. Glad you got it
working the way you want it.