Discussion Locked

Javascript - Form Refresh

0 helpful
8 replies
Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

Does anybody know of a way to refresh a selection list on a form (because changed content of list) without refreshing the whole page.

Netscape suggest using history.go(0), but this does not work if the page was generated from a form.

8 replies

by syscokid

I know nothing about Javascript but I found a similar q&A at another site. Here's the question: "Hi all... is it possible, by mean of JavaScript, to change the contents of a HTML combobox without needing
to refresh the page?"

I hesitate to post the answer for fear of copyright infringement but here is the link:

http://www.experts-exchange.com/jsp/qShow.jsp?qid=20098292

The only catch is that you will have to register to see the answer. I think by registering, you start off with 50 points, which is enough to purchase the answer.

(NOTE: Sometimes when I cut and paste URL's it looks ok to me but once the answer is posted, an extraneous space will have crept in. Make sure you delete any extraneous spaces or the page won't load).

by boyarsky

I'm using a selection list that shows multiple options. If the option added is longer than any of the other options, the new option is cut off.

by jay eckles

There are at least three things you can do dynamically with a drop-down menu without reloading the page:

1. You can remove an item from a drop down list by assigning null to the option element. Here's an example:
document.form.select1.options[2] = null ;
This removes the third element from the list.

2. You can change the value of an item in the drop down list (this is the value that is returned when the form is submitted):
document.form.select1.options[2].value = "newvalue" ;
This changes the value of the third element.

3. You can also change the label of the option (what the user sees in the drop-down list) with the following bit of code:
document.form.select1.options[2].text = "New Option" ;
This changes the label of the third element.

The only thing I don't know how to do is add a new option to a list...For example, if you have a select with three options, "apple", "orange", "bananna", I don't think you can add a fourth element to the options array. If you think you'll be deleting and adding options, you need to initially create your select with the maximum number of options you'll need, and change values/text accordingly.

Note that you can also sort the options in a select list by storing the current value and text of each option in a temporary variable then reassigning.

by shanghai sam

Thank you for the description. Items one and two work in Netscape and IE. Item three works in IE, but fails in Netscape for the same reason I can't add without refreshing.

By the way, you can add an option to a list in the following way:

document.form.select1.options[document.form.select1.length] = new Option(label, value)

by andrew

Here's a conceptual solution (I haven't actually done this, but it seems like it might work):

Place the code to get the fresh data from the server in a hidden frame (like a form submit), and when the data comes back, populate the visible SELECT element via JavaScript.

This discussion is closed to new replies.