Adding to Listbox and Deleting Elements from List

Kylena · 04-30-2004, 09:42 AM

I've this criteria:

1. Users have to fill in 3 fields, VCompany, VName, VCountry.

2. They are allowed to have multi-value in each of these fields because there can be more than one company or more than one person from the same company.

3. When they click on the Add button, all 3 values (1 entry at a time) will be updated to a listbox (maybe in this format: Company A, Billy Goh, China). The next entry shall be in the same way.

4. If they were to enter the wrong entry, they have to option to delete that particular entry from the listbox.

Can these be done? I remember something about delimiters, is comma one of them? If not, can I use tab (\n) in the listbox instead?

To start off, this is the code that I have in mind:

Code:

function addToList()
{
	var f = document.forms[0];

	for (i = 0; i < f.ListBox.length; i++)
	{		
		f.ListBox[i].value = f.VCompany.value + "\t" + f.VName.value + "\t" + f.VCountry.value;
	}
}

I may be using the wrong code. I think I should be inserting new element in the last index whenever they click on Add, correct?

Kor · 04-30-2004, 10:20 AM

f.ListBox.length ?

That means you have more than an element with the same name, which is not correct (except radio buttons)

On the other hand, you have first to definite the final value than to asign this to the field.

Yes, you may use \ n to break the line

Something like this is what you need?

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script>

function bla(f){

text='';

for(var i=0;i<f.elements.length;i++){

if((f.elements[i].name == 'VCompany')||(f.elements[i].name == 'VName')||(f.elements[i].name == 'VCountry')){

text = text+f.elements[i].value+'\n'

}

}

f.area.value=text;

}

</script>

</head>

<body>

<form>

<input name="VCompany" type="text" onkeyup="bla(this.form)"> Company<br>

<input name="VName" type="text" onkeyup="bla(this.form)"> Name<br>

<input name="VCountry" type="text" onkeyup="bla(this.form)">Country<br>

<br>

  <textarea name="area" cols="" rows="3"></textarea>

</form>

</body>

</html>

Kylena · 05-04-2004, 08:18 AM

Oops, I should have made myself clear.

ListBox is just the listbox where the final inputs of VCompany, VName & VCountry are going to be stored. Thus f.ListBox.length.

I modified your code to this:

Code:

<INPUT TYPE=button onClick="var f = document.forms[0];
var vDetails = f.VisitorDetails;
var newIndex = vDetails.length;
vDetails.length = newIndex + 1;
vDetails.options[newIndex].text = f.VCompany.value + &quot;;&quot; + f.VName.value + &quot;;&quot; + f.VCountry.value;" VALUE="Add New Visitor Details"><BR>
List of Visitor Details: 
<SELECT NAME="VisitorDetails" MULTIPLE></SELECT>

Thanks for your help, Kor!