DelphiFAQ Home Search:

RESET button in my form does not restore my listbox content


commentsThis article has not been rated yet. After reading, feel free to leave comments and rate it.


My form uses javascript to populate a SELECT listbox with zip codes chosen by the user. The zip code listbox could have any amount of entries. When the user presses the form's RESET button, it does not restore the listbox to its original entries.


The reason that a reset button will not restore a SELECT listbox is because such a SELECT list is considered to be static. The user would normally only change which item(s) is(are) selected. Your form's reset button will indeed try to restore the original selection.

What you need to do is have a second copy of that listbox on your form, but hidden. This copy will never be used. To hide a listbox you need to assign the style visibility="hidden".

Then put an onclick() event on that listbox. In the onclick event call the function copy_listbox which is shown below. It takes two arguments where tgt is the target listbox (the one that will be filled) and src is the source listbox - the one that will be duplicated.

In your case you would call
copy_listbox(zipcode_list, hidden_list)

Ideally your server side script which generates the original HTML form will provide the hidden copy and make sure it has the same content. If that is not possible, you can include an empty hidden listbox and in the body onload() event, call copy_listbox with inverted parameters.

function copy_listbox(tgt,src) {
  var lb=document.getElementById(tgt);
  // clear the input listbox
  for (var i=lb.options.length-1; i>=0; i--){
    lb.options[i] = null;
  lb.selectedIndex = -1;
  // restore it

  var bk=document.getElementById(src);
  for (var i=bk.options.length-1; i>=0; i--){
    oOption = document.createElement("OPTION");
    // Append to end of list
    oOption.text = bk.options[i].text;
    oOption.value = bk.options[i].value;
    oOption.selected = false;
    lb.options[lb.options.length] = oOption;

Content-type: text/html


2007-12-05, 07:00:25
anonymous from India  
Thanks! Your code helped me. Only thing is that
I had to change
for (var i=bk.options.length-1; i>=0; i--){
for (var i=0; i<bk.options.length; i++){
for the items to appear in the correct order.
2008-02-29, 02:24:11
anonymous from United States  
lb.options.length = 0;

works exactly the same



NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: