Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    remove items from a dynamic div

    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.
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks...the code works fine... :-) God Bless you !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •