1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:40 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Help with dynamic list box scripts

         

Argblat

8:05 pm on Jan 17, 2005 (gmt 0)

10+ Year Member



Hello all. It seems I've gotten a little bit over my head with a dynamic aspect of a web page I am workign on. The idea is to be able to dynamically add "customer codes" from a text input to a listbox, where you can also remove the seperate codes if you so choose. I have gotten this implemented for the most part, and I will include the code for this at the end of the message.

Here are the two aspects of this implementation that I cannot solve myself:

1. How can I make it so that a person cannot enter the same code twice, and a warning box will open and the code will not be entered into the list.

2. How can I make it so that all of the data in the list box will be passed to the next page when the save button is clicked.
I understand that this is not the intended function of a list box, perhaps there is a better solution to the basic issues I am trying to solve? but I am under the impression that javascript will allow me to send the whole list box no matter what is (or isn't) highlighted when save is clicked

Source:
------------------------------------------------------
<html>
<head>
<tite></title>

<style type="text/css">

option {width:250px}
</style>

<script language="JavaScript">
// helper function for prepend() and append()

function makeNewOption(txt) {
var newItem = document.createElement("option")
newItem.innerHTML = txt
return newItem
}

function append(form) {
var newItem = makeNewOption(form.input.value)
var lastOption = document.getElementById("myList").lastChild
document.getElementById("myList").appendChild(newItem)
}

function deleteSelectedItemsFromList(sourceList) {
var maxCnt = sourceList.options.length;
for(var i = maxCnt - 1; i >= 0; i--) {
if ((sourceList.options[i]!= null) && (sourceList.options[i].selected == true)) {
sourceList.options[i] = null;
}
}
}

function setfocus() {
document.Form.input.focus();
}

</script>

</head>
<body onLoad="setfocus()">
<div align=center>
<table width="75%"><tr><td>

<h1>TEST</h1>

<form name="Form">
<label>Enter Customer Code:</label><br \>

<input type="text" name="input" style="width: 40%">
<input type="button" name="inputButton" value="Add" onClick="append(this.form); document.forms[0].reset(); setfocus()">

<br \>
<br \>

</form>

<form action="#" method="get" name="">
<label>Customer Codes:</label><br \>
<select id="myList" name="parentList" size="4" style="width:40%">
</select>
<input type="button" value="Remove Selected Item" onclick="javascript:deleteSelectedItemsFromList(parentList);">
<br \><br \><br \>
<input type="Submit" value="Save"><br>
</form>

</td></tr></table>
</div>
</body>
</html>

------------------------------------------------------

thank you VERY much for any help you can offer me
-Michael

[edited by: tedster at 9:42 pm (utc) on Mar. 29, 2006]
[edit reason] by request [/edit]

adni18

11:16 pm on Jan 17, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try this:

<html>
<head>
<tite></title>

<style type="text/css">

option {width:250px}
</style>

<script language="JavaScript">
// helper function for prepend() and append()

function makeNewOption(txt) {
var newItem = document.createElement("option")
newItem.innerHTML = txt
return newItem
}

function append(form) {
var newItem = makeNewOption(form.input.value);
var lastOption = document.getElementById("myList").lastChild;
var b=0;
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
if(document.getElementById("myList").options[c].innerText.replace(/\W/g,'') == form.input.value.replace(/\W/g,''))
{
b=1;
}
}
if(b==0)
{
document.getElementById("myList").appendChild(newItem);
}
else if(b==1)
{
alert("That customer code already exists in the list box.");
}
}

function deleteSelectedItemsFromList(sourceList) {
var maxCnt = sourceList.options.length;
for(var i = maxCnt - 1; i >= 0; i--) {
if ((sourceList.options[i]!= null) && (sourceList.options[i].selected == true)) {
sourceList.options[i] = null;
}
}
}

function setfocus() {
document.Form.input.focus();
}

function subForm()
{
listOf="";
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
listOf=listOf+document.getElementById("myList").options[c].innerText+",";
}
window.location="otherpage.html?contains="+listOf;
}

</script>

</head>
<body onLoad="setfocus()">
<div align=center>
<table width="75%"><tr><td>

<h1>TEST</h1>

<form name="Form">
<label>Enter Customer Code:</label><br \>

<input type="text" name="input" style="width: 40%">
<input type="button" name="inputButton" value="Add" onClick="append(this.form); document.forms[0].reset(); setfocus()">

<br \>
<br \>

</form>

<label>Customer Codes:</label><br \>
<select id="myList" name="parentList" size="4" style="width:40%">
</select>
<input type="button" value="Remove Selected Item" onclick="javascript:deleteSelectedItemsFromList(parentList);">
<br \><br \><br \>
<input type="Submit" value="Save" onClick="subForm()"><br>
</form>

</td></tr></table>
</div>
</body>
</html>

adni18

9:58 pm on Jan 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OOPS! Posted this in the wrong post!

Argblat

4:26 pm on Jan 19, 2005 (gmt 0)

10+ Year Member



Hey, you certainly didn't post this in the wrong place because it solves my problem perfectly. Thank you very much for that.

Of course it couldn't all be golden...this solution only works for I.E. It is very buggy in Firefox, and kills even the original functionalities of the code I posted. This makes me sad :( becuase Firefox is my browser of choice, but more importantly it makes me nervious that this solution won't work for everyone who will eventually need to user it.

In running the page through Firefox's Javascript debugger the error that pops up (four times no less) reads:

Error: document.getElementById("myList").options[c].innerText has no properties
Source File: [localhost...]
Line: 25

Hopefully I can figure this out now that the hard part has been solved for me (thank you again :), but I am no JavaScript expert (I'm barely an amateur), and if the solution comes to anyone I would greatly appreciate some guidance

thank you for all of your help,
Mike

[edited by: tedster at 7:24 pm (utc) on April 3, 2006]
[edit reason] by request [/edit]

adni18

8:42 pm on Jan 19, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I accidentally posted the code for somebody else's problem in this form, so I just edited it.

I forgot innerText doesn't work in FireFox. Try innerHTML:

<html>
<head>
<tite></title>

<style type="text/css">

option {width:250px}
</style>

<script language="JavaScript">
// helper function for prepend() and append()

function makeNewOption(txt) {
var newItem = document.createElement("option")
newItem.innerHTML = txt
return newItem
}

function append(form) {
var newItem = makeNewOption(form.input.value);
var lastOption = document.getElementById("myList").lastChild;
var b=0;
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
if(document.getElementById("myList").options[c].innerHTML.replace(/\W/g,'') == form.input.value.replace(/\W/g,''))
{
b=1;
}
}
if(b==0)
{
document.getElementById("myList").appendChild(newItem);
}
else if(b==1)
{
alert("That customer code already exists in the list box.");
}
}

function deleteSelectedItemsFromList(sourceList) {
var maxCnt = sourceList.options.length;
for(var i = maxCnt - 1; i >= 0; i--) {
if ((sourceList.options[i]!= null) && (sourceList.options[i].selected == true)) {
sourceList.options[i] = null;
}
}
}

function setfocus() {
document.Form.input.focus();
}

function subForm()
{
listOf="";
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
listOf=listOf+document.getElementById("myList").options[c].innerHTML+",";
}
window.location="otherpage.html?contains="+listOf;
}

</script>

</head>
<body onLoad="setfocus()">
<div align=center>
<table width="75%"><tr><td>

<h1>TEST</h1>

<form name="Form">
<label>Enter Customer Code:</label><br \>

<input type="text" name="input" style="width: 40%">
<input type="button" name="inputButton" value="Add" onClick="append(this.form); document.forms[0].reset(); setfocus()">

<br \>
<br \>

</form>

<label>Customer Codes:</label><br \>
<select id="myList" name="parentList" size="4" style="width:40%">
</select>
<input type="button" value="Remove Selected Item" onclick="javascript:deleteSelectedItemsFromList(parentList);">
<br \><br \><br \>
<input type="Submit" value="Save" onClick="subForm()"><br>
</form>

</td></tr></table>
</div>
</body>
</html>

Argblat

2:07 pm on Jan 21, 2005 (gmt 0)

10+ Year Member



adni18,

I'm sorry that it's been taking me like 2 days to respond to each post you put up with help for me, but school has just started back up for me and things are a little nuts. I just wanted to say thank you very much for your help on this issue, as you have solved it perfectly, and I can only hope to pick it apart and try to understand it for my future reference.

I also hope that I can someday be as useful to this message board as it has been to me, and give back as much as I have taken. In the meantime, I truly appreciate all of your help

-Mike

Argblat

8:52 pm on Jan 24, 2005 (gmt 0)

10+ Year Member



Here is the code with a small bug fixed that allows for all functionalities to work properly across the the latest versions of IE, Netscape, and Firefox. Perhaps it will be useful to someone else in the future. Thank you again for all the help :)

------------------------------------------------------

<html>
<head>
<tite></title>

<style type="text/css">

option {width:250px}
</style>

<script language="JavaScript">
// helper function for prepend() and append()

function makeNewOption(txt) {
var newItem = document.createElement("option")
newItem.innerHTML = txt
return newItem
}

function append(form) {
var newItem = makeNewOption(form.input.value);
var lastOption = document.getElementById("myList").lastChild;
var b=0;
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
if(document.getElementById("myList").options[c].innerHTML.replace(/\W/g,'') == form.input.value.replace(/\W/g,''))
{
b=1;
}
}
if(b==0)
{
document.getElementById("myList").appendChild(newItem);
}
else if(b==1)
{
alert("That customer code already exists in the list box.");
}
}

function deleteSelectedItemsFromList(sourceList) {
var maxCnt = sourceList.options.length;
for(var i = maxCnt - 1; i >= 0; i--) {
if ((sourceList.options[i]!= null) && (sourceList.options[i].selected == true)) {
sourceList.options[i] = null;
}
}
}

function setfocus() {
document.Form.input.focus();
}

function subForm() {
listOf="";
for(var c=0;c<document.getElementById("myList").options.length;c++)
{
listOf=listOf+document.getElementById("myList").options[c].innerHTML+",";
}
window.location="otherpage.html?contains="+listOf;
}

</script>

</head>
<body onLoad="setfocus()">
<div align=center>
<table width="75%"><tr><td>

<h1>TEST</h1>

<form name="Form">
<label>Enter Customer Code:</label><br \>

<input type="text" name="input" style="width: 40%">
<input type="button" name="inputButton" value="Add" onClick="append(this.form); document.forms[0].reset(); setfocus()">

<br \>
<br \>

</form>

<form action=javascript:subForm() method="get" name="parentList">
<label>Customer Codes:</label><br \>
<select id="myList" name="parentList" size="4" style="width:40%">
</select>
<input type="button" value="Remove Selected Item" onclick="javascript:deleteSelectedItemsFromList(parentList);">
<br \><br \><br \>
<input type="Submit" value="Save" onClick="subForm()"><br>
</form>

</td></tr></table>
</div>
</body>
</html>

------------------------------------------------------

m00nbeast

7:35 pm on Mar 10, 2005 (gmt 0)

10+ Year Member



you guys rule!

This was just what I was looking for! I was afraid I would have to create it on my own for a while.

m00nbeast

6:13 pm on Mar 11, 2005 (gmt 0)

10+ Year Member



ut oh

two problems:

When I add to the list box all the other fields in my form are cleared (?)

On the page where I get the form field values, it doesn't retrieve teh values from "parentList" (?)

anybody got any suggestions as to why? Thanks for your help in advance :) Sorry for my ignorance of javaScript

m00nbeast

6:27 pm on Mar 29, 2005 (gmt 0)

10+ Year Member



okay I figured out why it cleared all my form fields. Sheesh I'm a bit of a lame brain sometimes.

But I still have the problem of not being able to get the form variables from

<select id="myList" name="parentList" size="4" style="width:40%"> </select>

with

<%
additional_alerts = Request.FORM("parentList")
%>

my response.write is not showing me any retrieved values. Shouldnt there be a comma separated list af variables sent by the form?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 6:40 am May 14, 2026