Dynamically Add to a List with Javascript. No Page Refreshing.

Hi Everyone

I'll explain the situation first:

I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected.

More Detail:

LEFT SIDE OF SCREEN:

[DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected.

[ADD] <- add button that puts the values from the dropdown list to an array.

RIGHT SIDE OF SCREEN:

My Courses:
* TEST1001
* TEST1002

This is being updated dynamically so that whenever the add button is hit, this lists grows.

[SEND] <- Send button

Thank you,

What do you have so far?

Right, should of included that!

Right now I am using two forms.

Left Side:

<form name="frm">
Select Courses
<select name="inputbox">
<option value="COURSE1">COURSE1</option>
<option value="COURSE2">COURSE2</option>
<option value="COURSE3">COURSE3</option>
</select>

<input type="button" onClick="add_item();" value="Send to Backpack"/>
</form>

Right Side:

<form name="backpack">
<textarea name="outputbox" value="" disabled="disabled" readonly="readonly" style="background-color: #E6E8E8; border:0; resize: none"></textarea>
<input name="button" type="button" onClick="remove_item();" value="Remove"/>
</form>


And here if the javascript in the HEAD:


<script language="JavaScript">
var backpack_array = new Array();

function add_item(){
var item = document.frm.inputbox.value;
backpack_array.push(item);
document.backpack.outputbox.value = backpack_array ;

}
function remove_item(){
backpack_array.pop();
document.backpack.outputbox.value = backpack_array ;
}
</script>


So this is actually making it dynamically update the textarea on the rightside, but it is comma seperated. I was hoping to have it be in bullets.

Thanks,

This is because you assign an array to a (string typed) value of a textarea. This will automatically apply the method .toString() to the array, which will result in a comma separated list.

You should process the array (or the list) to create <li> elements to a <ul> list instead of a textarea. You can't have (real) bulletts inside a textarea.


<ul id="outputbox">
</ul>

function add_item() {
...
var mylist = document.getElementById('outputbox');
mylist.innerHTML = '';
for(i=0; i<backpack_array.length; i++) {
mylist.innerHTML += '<li>' + backpack_array[i] + '</li>\n';
}
}