...

View Full Version : remove items from a dynamic div



jscoder
10-04-2008, 12:24 AM
I have items in a selectbox. When i select them and click on a button , the items get added in
a dynamic div with a checkbox.
For example if I add jj@jj.com from selectbox I should not be able to add it again in the div.
I have to keep jj@jj.com still in my selectbox.

I also have a remove button to remove items from the div, i can check the items and remove them.
My code works fine till this point.

The problem comes when I remove the item added from selectbox.
If i try to add it again it doesnt allow me to add.

In add() I am using an array to keep track of what I selected, is there a way to solve my problem.
Urgent suggestions highly appreciated.



<html>
<head>
<base/>


<script language="JavaScript">

function remove()
{
var participants = document.getElementById( 'participantDiv' ).getElementsByTagName("input");

for( var i = participants.length-1; i > -1; i-- )
if( participants[ i ] .checked )
{

if( participants[i].nextSibling.nodeType == 3 )
participants[i].parentNode.removeChild( participants[i].nextSibling );
participants[ i ].parentNode.removeChild( participants[ i ] );
}
}

function add()
{

if(!this.addedList) {

this.addedList=[];


}

var addrList = document.getElementById("names");

for(var j=0;j<addrList.options.length;j++)
{


if(addrList.options[j].selected && !this.addedList[addrList.options[j].text] )
{
var i = parseInt(document.getElementById( "iCheckboxes" ).value);
var cb = document.createElement( "input" );

cb.type = 'checkbox';
cb.id = "id" + i;
cb.name = "chkName" + i;
cb.value = "test" + i;


this.addedList[addrList.options[j].text]=true;

var text = document.createTextNode(addrList.options[j].text);
document.getElementById( 'participantDiv' ).appendChild( cb );

document.getElementById( 'participantDiv' ).appendChild( text) ;
cb.setAttribute('checked',true);
document.getElementById( "iCheckboxes" ).value = parseInt(document.getElementById( "iCheckboxes" ).value) + 1;
}
}
}



</script>
<body>
<form>
<div id="participantDiv" style="height:300px; overflow:auto; border:1px solid #CCC;font-size:9pt;" >



</div>
<input type="button" value="Remove" onclick="remove()" >

<input type="hidden" value="1" name="iCheckboxes" id="iCheckboxes">



<div style="height:150px; overflow-y: scroll;padding-left:10px;">
<select id="names" multiple="true" size="5" style="width:375px">
<option value="jam">jam@gmail.com</option>
<option value="kany">kany (keny@verizon.com)</option>
<option value="amy">amy (amy@verizon.com)</option>
<option value="aashi">tamy (ayesha@gmail.com)</option>
<option value="imran">itm (tim@gmail.com)</option>
<option value="amna1">a1(a1@gmail.com)</option>
<option value="amna2">a1(A@gmail.com)</option>
<option value="amna3">a2(mina@gmail.com)</option>
<option value="amna4">a3(ina@gmail.com)</option>
<option value="amna5">a4(tina@gmail.com)</option>
</select>

<input type="button" value="AddFromSelect" onclick="add()">


</div>
</form>

vwphillips
10-04-2008, 05:10 PM
<html>
<head>
<base/>


<script language="JavaScript">

function remove()
{
var participants = document.getElementById( 'participantDiv' ).getElementsByTagName("input");

for( var i = participants.length-1; i > -1; i-- )
if( participants[ i ] .checked )
{

if( participants[i].nextSibling.nodeType == 3 )
participants[i].parentNode.removeChild( participants[i].nextSibling );
participants[ i ].opt.set=false;
participants[ i ].parentNode.removeChild( participants[ i ] );

}
}

function add()
{
var addrList = document.getElementById("names");

for(var j=0;j<addrList.options.length;j++)
{


if(addrList.options[j].selected && !addrList.options[j].set )
{
var i = parseInt(document.getElementById( "iCheckboxes" ).value);
var cb = document.createElement( "input" );
cb.opt=addrList.options[j];
cb.type = 'checkbox';
cb.id = "id" + i;
cb.name = "chkName" + i;
cb.value = "test" + i;

addrList.options[j].set=true;
var text = document.createTextNode(addrList.options[j].text);
document.getElementById( 'participantDiv' ).appendChild( cb );

document.getElementById( 'participantDiv' ).appendChild( text) ;
cb.setAttribute('checked',true);
document.getElementById( "iCheckboxes" ).value = parseInt(document.getElementById( "iCheckboxes" ).value) + 1;
}
}
}



</script>
<body>
<form>
<div id="participantDiv" style="height:300px; overflow:auto; border:1px solid #CCC;font-size:9pt;" >



</div>
<input type="button" value="Remove" onclick="remove()" >

<input type="hidden" value="1" name="iCheckboxes" id="iCheckboxes">



<div style="height:150px; overflow-y: scroll;padding-left:10px;">
<select id="names" multiple="true" size="5" style="width:375px">
<option value="jam">jam@gmail.com</option>
<option value="kany">kany (keny@verizon.com)</option>
<option value="amy">amy (amy@verizon.com)</option>
<option value="aashi">tamy (ayesha@gmail.com)</option>
<option value="imran">itm (tim@gmail.com)</option>
<option value="amna1">a1(a1@gmail.com)</option>
<option value="amna2">a1(A@gmail.com)</option>
<option value="amna3">a2(mina@gmail.com)</option>
<option value="amna4">a3(ina@gmail.com)</option>
<option value="amna5">a4(tina@gmail.com)</option>
</select>

<input type="button" value="AddFromSelect" onclick="add()">


</div>
</form>

jscoder
10-06-2008, 05:37 PM
Thanks...the code works fine... :-) God Bless you !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum