Dont allow duplicate values in a dynamic div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • afaheem
    New Member
    • Sep 2008
    • 10
    #1

    Dont allow duplicate values in a dynamic div

    I am selecting multiple items from a selectbox and on click of a button adding them dynamically to a <div>.
    I am adding it as children to the div ...something like checkbox + <selecteditem >.

    Next time when the user selects an option which he already added in the div, he should not be allowed to do so.
    how can i achieve this? a string match or how ? please send the code

    below is my code...



    [HTML]<html>
    <head>
    <base/>
    <link rel="stylesheet " type="text/css" href="includes/css/vzsmb_popup_200 8.css" />

    <script language="JavaS cript">

    function addFromAddressB ook()
    {
    var addrList = document.getEle mentById("names ");
    var options = new Object();
    for(var j=0;j<addrList. options.length; j++)
    {
    if(addrList.opt ions[j].selected)
    {
    var i = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value);
    var cb = document.create Element( "input" );

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

    var text = document.create TextNode(addrLi st.options[j].text);
    document.getEle mentById( 'participantDiv ' ).appendChild( cb );

    document.getEle mentById( 'participantDiv ' ).appendChild( text) ;
    cb.setAttribute ('checked',true );



    document.getEle mentById( "iCheckboxe s" ).value = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value) + 1;

    }
    }
    }


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



    </div>


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

    <div style="height:1 50px; overflow-y: scroll;padding-left:10px;">
    <select id="names" multiple="true" size="5" style="width:37 5px">
    <option value="jam">jam @gmail.com</option>
    <option value="kany">ka ny (keny@verizon.c om)</option>
    <option value="amy">amy (amy@verizon.co m)</option>
    <option value="aashi">a ish (aish@gmail.com )</option>
    <option value="jason">J ason (Jasom@gmail.co m)</option>
    <option value="Alice">A lice(Alice@gmai l.com)</option>
    <option value="Emily">E mily(Am@gmail.c om)</option>
    <option value="Rita">Ri ta(rita@gmail.c om)</option>
    <option value="Shiela"> Shiela(ma@gmail .com)</option>
    <option value="Noni">No ni(nonu@gmail.c om)</option>
    </select>

    <input type="button" value="AddFromS elect" onclick="addFro mAddressBook()" >


    </div>
    </form>[/HTML]
    Last edited by acoder; Sep 17 '08, 10:59 PM. Reason: Added [code] tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      The simple solution would be to remove the selected options each time.

      PS. please use code tags when posting code.

        Comment

        • afaheem
          New Member
          • Sep 2008
          • 10
          #3
          I need to check if the selected item is already available in the div and then not allow the user to add it again...any suggestions on how to proceed ?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              I know, but I suggested a very simple solution to the problem.

              Remove the options that have been selected as you create the items, so that the user can now no longer selected them.

                Comment

                • afaheem
                  New Member
                  • Sep 2008
                  • 10
                  #5
                  I need to keep the options ..it should be a copy of what I am selecting ....removing the selected items is not what I want

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Ok, then keep an array of the items already selected. In the addFromAddressB ook() function, check that none of the currently selected items are in the array. If they are, don't allow the user to add the selection. If validation passes and the items are added, add these newly selected options to the array.

                        Comment

                        • afaheem
                          New Member
                          • Sep 2008
                          • 10
                          #7
                          Originally posted by acoder
                          Ok, then keep an array of the items already selected. In the addFromAddressB ook() function, check that none of the currently selected items are in the array. If they are, don't allow the user to add the selection. If validation passes and the items are added, add these newly selected options to the array.
                          The solution works partially....it fails when I try to delete the selected items in the div . The items gets removed but when I try to add them back from the selectbox they dont get added 'cos I am maintaining a list of already selected items in the array.
                          Please suggestions needed

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              You'd need to remove them from the array too when deleting.

                                Comment

                                Previous template Next
                                Working...