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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to select multiple input to remove from the list

    Hi,

    I have the code , which add the data from input filed to list-box.Now am able to remove individual input's.

    I want to have option multiple select to remove the data from list box .
    Am not able to process all the data whichever are present in select tag


    CODE:

    Code:
    <form id="frm" action="" method="post"> 
      Select list:<br/> 
      <select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/> 
      Add an option: <input type="text" name="optval" id="optval" /><br /><br/> 
      <input type="button" id="addopt" name="addopt" value="Add Option" onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp; 
      <input type="button" id="del_opt" name="del_opt" value="Delete Option" onclick="adOption.delOption('sel_list', 'optval');" /> 
    </form> 
    <script type="text/javascript"><!-- 
    var adOption = new Object(); 
      adOption.checkList = function(list, optval) { 
        var re = 0;       
        var opts = document.getElementById(list).getElementsByTagName('option'); 
    
        for(var i=0; i<opts.length; i++) { 
          if(opts[i].value == document.getElementById(optval).value) { 
            re = 1; 
            break; 
          } 
        } 
        return re;     
       }; 
      adOption.addOption = function(list, optval) { 
        var opt_val = document.getElementById(optval).value; 
        if(opt_val.length > 0) { 
          if(this.checkList(list, optval) == 0) { 
            var myoption = document.createElement('option'); 
            myoption.value = opt_val; 
            myoption.innerHTML = opt_val; 
            document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild); 
    
            document.getElementById(optval).value = '';   
          } 
          else alert('The value "'+opt_val+'" already added'); 
        } 
        else alert('Add a value for option'); 
      }; 
      adOption.delOption = function(list, optval) { 
        var opt_val = document.getElementById(optval).value; 
        if(this.checkList(list, optval) == 1) { 
          var opts = document.getElementById(list).getElementsByTagName('option'); 
          for(var i=0; i<opts.length; i++) { 
            if(opts[i].value == opt_val) { 
              document.getElementById(list).removeChild(opts[i]); 
              break; 
            } 
          } 
        } 
        else alert('The value "'+opt_val+'" not exist'); 
      } 
      adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; } 
    --></script>
    How can I do this ....?
    Please Help

    Thank You
    Pervez
    Last edited by VIPStephan; 10-01-2012 at 01:12 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    FYI: if you hit "enter" after typing a name into the input box, it disappears from that box and completely removes every name in the select list. Not a good thing.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,879
    Thanks
    56
    Thanked 536 Times in 533 Posts
    generally speaking you loop through the options (using a reverse for loop) and if the option is selected, remove it.

    if you need more detail, feel free to ask.

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi ,

    Sorry I didn't get you. can u bit clear about this ......?

    And also I wanna process this select list to back end for further process .How can I add multiple data to select list at a time and process this .......?

    Thank You
    Pervez

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    0
    Thanked 6 Times in 6 Posts
    you have to add "multiple" in the select tag to select multiple value. As I have added below:
    <select multiple name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"></select><br/><br/>

    Also, you have to update your delete function. Please see below:
    adOption.delOption = function(list, optval) {
    var opts = document.getElementById(list).getElementsByTagName('option');;
    for(var i=opts.length -1; i >= 0 ; i--) {
    if(opts[i].selected == true) {
    document.getElementById(list).removeChild(opts[i]);
    }
    }
    }

    Let me know is this you want?

  • #7
    New Coder
    Join Date
    Jul 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi shyagrawal,

    Thank You for your response.

    When I update my code as you told , the list box not taking input from input filed .

    And also i wann process all those list box items to back-end.

    Please Help

    Thank You
    Pervez

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    0
    Thanked 6 Times in 6 Posts
    use below code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
    <h1>
    Pizzeria</h1>
    <p>
    &nbsp;</p>
    <p>
    <b>Name:</b>&nbsp;
    <input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <b>Pickup:</b>
    <input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
    <input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
    <p>
    <!-- create ddl for style and size-->
    <!-- make ddl have a set value-->
    <b>Style:</b> &nbsp; &nbsp;
    <select id="ddlStyle">
    <option selected="selected">Choose Style</option>
    <option value="empty"></option>
    <option value="deepDish">Deep Dish</option>
    <option value="TomatoPie">Tomato Pie</option>
    <option value="ThinCrust">Thin Crust</option>
    <option value="Stuffed Crust">Stuffed Crust</option>
    </select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
    <select id="ddlSize">
    <option selected="selected">Choose Size</option>
    <option value="empty"></option>
    <option value="Small">Small</option>
    <option value="Medium">Medium</option>
    <option value="Large">Large</option>
    <option value="XLarge">Xtra Large</option>
    <!-- <option value="other">Other value</option>-->
    </select></p>
    <p>
    <!-- Toppings:
    <select id="investment1" <optgroup="" label="" name="investment0">
    <option value="1000">$1,000</option>
    <option value="5000">$5,000</option>
    <option value="10000">$10,000</option>
    <option value="25000">$25,000</option>
    <option value="other">Other value</option>
    </select></p>-->
    <p>
    <b>Toppings: </b>&nbsp; <input id="chkPepperoni" type="checkbox" value="Pepperoni"/><b>&nbsp;Pepperoni: </b>
    <input id="chkBlkOlives" type="checkbox" value="Black Olives"/><b> Black Olives: </b>
    <input id="chkMeatball" type="checkbox" value="Meatballs"/><b>Meatballs: </b>
    <input id="chkSausage" type="checkbox" value="Sausage"/><b> Sausage: </b>
    
    <p>
    &nbsp;</p>
    <p>
    &nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" onclick="ConfirmOrder();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;
    <input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
    <!-- //does this work? -->
    <p>
    <textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
    <p>
    &nbsp;</p>
    <script language="javascript" type="text/javascript">
    
    
    var $ = function (id) {
    return document.getElementById(id);
    
    }
    
    function () {
    
    //get buttons and assign a funtion to its onclick
    
    $("btnConfirmOrder").onclick = ConfirmOrder;
    
    $("btnClrFrm").onclick = ClrFrm;
    
    
    }
    function ConfirmOrder() {
    
    //alert 
    var message = "You have ordered the following:\n\n";
    
    //test the toppings checkboxes
    //display the checked toppings in textbox
    
    if ($("chkPepperoni").checked) {
    message +=" - " + $("chkPepperoni").value + "\n";
    }
    if ($("chkBlkOlives").checked) {
    message +=" - " + $("chkBlkOlives").value + "\n";
    }
    if ($("chkMeatball").checked) {
    message +=" - " + $("chkMeatball").value + "\n";
    }
    if ($("chkSausage").checked) {
    message +=" - " + $("chkSausage").value + "\n";
    }
    
    //confirm to user what they have accepted
    //confirm(message)
    
    $("txtArea").value = message;
    
    }
    
    </script>
    <!--</body>-->
    </html>

  • #9
    New Coder
    Join Date
    Jul 2012
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi shyagrawal,

    Thank You for your response.

    When I update my code as you told , the list box not taking input from input filed .

    And also i wann process all those list box items to back-end.

    Please Help

    Thank You
    Pervez

  • #10
    New Coder
    Join Date
    Sep 2012
    Posts
    22
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Please correct my understanding. You want to delete entered text from the select list, right?
    For Example, If you enter "test" in the text box and "test" is present in list box, then you want to delete that option from select box, right? In that case, you can delete only options whose value is "test" in the select list.


  •  

    Tags for this Thread

    Posting Permissions

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