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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with adding/removing item from list

    Need some help with getting the remove selected item code to work:

    <html>
    <head>
    <title>(Type a title for your page here)</title>
    <script language="javascript" >

    function addNewItem()
    {
    // Retrieve the elements from the document body
    var textbox = document.getElementById('MyTextbox');
    var listbox = document.getElementById('MyListbox');

    // Now we need to create a new 'option' tag to add to MyListbox
    var newOption = document.createElement('option');
    newOption.value = textbox.value; // The value that this option will have
    newOption.innerHTML = textbox.value; // The displayed text inside of the <option> tags

    // Finally, add the new option to the listbox
    listbox.appendChild(newOption);
    }



    function removeItem(listbox)
    {
    var i;
    for(i=listbox.options.length-1;i>=0;i--)
    {
    if(listbox.options[i].selected)
    listbox.removeChild(i);
    }
    }

    </script>
    </head>




    <input id="MyTextbox" type="textbox" />
    <input type="button" value="Add Item" onclick="java script:addNewItem()" />
    <input type="button" value="Remove Item" onclick="java script:removeItem()" />

    <br /><br />

    <select id="MyListbox" size="10">
    <option value="apples">Apples</option>
    <option value="oranges">Oranges</option>
    <option value="bananas">Bananas</option>
    </select>

    </form>
    </body>

    </html>

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Well for starters, listbox isn't defined anywhere.

    Add this to your remove function (like you did in your add function): var listbox = document.getElementById('MyListbox');
    Last edited by itsallkizza; 12-16-2008 at 04:26 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I updated the remove function, but how do you remove the selected value? I don't think the removeChild would be correct for this.

    function removeItem(listbox)
    {
    var listbox = document.getElementById('MyListbox');
    var i;
    for(i=listbox.options.length-1;i>=0;i--)
    {
    if(listbox.options[i].selected)
    listbox.removeChild(i);
    }
    }

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    body
    {
    font-family: verdana,arial,sans-serif;
    font-size: 12px;
    }
    
    form span.title
    {
    font-weight: bold;
    margin: 0 4px 0 0;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    /*Author: itsallkizza*/
    
    function add_option_to(select,option_name,option_value)
    	{
    	if (document.createElement)
    		{
    		var new_option = document.createElement("option");
    		new_option.value = option_value;
    		new_option.innerHTML = option_name;
    		if (select.appendChild)
    			{
    			select.appendChild(new_option);
    			return new_option;
    			}
    		}
    	return null;
    	}
    
    function remove_option_by_index(select,index)
    	{
    	if (select.removeChild && select.options && select.options.length > index)
    		{
    		select.removeChild(select.options[index]);
    		return true;
    		}
    	return false;
    	}
    
    function addNewOption(form_element)
    	{
    	var new_name = form_element.new_option_name.value || false;
    	var new_value = form_element.new_option_value.value || "";
    	if (!new_name) return false;
    	add_option_to(document.getElementById(form_element.select_id.value),new_name,new_value);
    	return false;
    	}
    
    function removeOption(form_element)
    	{
    	var index = form_element.option_index.value || false;
    	if (!index || isNaN(index)) return false;
    	remove_option_by_index(document.getElementById(form_element.select_id.value),index);
    	return false;
    	}
    // ]]>
    </script>
    </head>
    <body>
    
    <form onsubmit="return addNewOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">New Option Name:</span><input type="text" name="new_option_name" />
    	<span class="title">New Option Value:</span><input type="text" name="new_option_value" />
    	<input type="submit" value="Add New Option" />
    </form>
    <form onsubmit="return removeOption(this)">
    	<input type="hidden" name="select_id" value="my_select" />
    	<span class="title">Remove Option Index:</span><input type="text" name="option_index" />
    	<input type="submit" value="Remove Option" />
    </form>
    
    <select id="my_select">
    	<option value="apples">Apples</option>
    	<option value="bananas">Bananas</option>
    	<option value="oranges">Oranges</option>
    </select>
    
    </body>
    </html>
    Last edited by itsallkizza; 12-16-2008 at 06:50 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to add just the text without the option value (just using the add button) and remove the item without the option value (just select from the pull down list and use the delete button from the keyboard or java delete button).

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    The functions and framework I spent time creating for you give you the capability to do anything you want.

    If you want to add blank or pre-valued options with only a button, then go for it - the code is all there.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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