Thread: Select divs

Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8

    Select divs


    I want to make a collection of divs and when someone clicks on one it has to be (de)selected. Also I want it in some sort of an input because I want the user to submit the selected divs. How can I do this best?

    Here's the code I have now:
    Code:
    var num_input = 0;
    function func(nr,selected) {       
        if(selected === 0 && !((' ' + document.getElementById("nr_div"+ nr_div).className + ' ').indexOf(' selected ') > -1)) {
            // select
            num_input = num_input + 1;
            document.getElementById("form").innerHTML="<input type='hidden' id='form"+ nr_div +"' name='nr_div["+ num_input +"]' value='"+ nr_div +"'>";
            a=document.getElementById("nr_div"+ nr_div);
            a.className = a.className + " selected";
            
            document.getElementById("nr_div"+ nr_div).onclick = 'func(nr_div,1);';  
        }
        if(selected === 1 && num_input >= 1 && ((' ' + document.getElementById("nr_div"+ nr_div).className + ' ').indexOf(' selected ') > -1)) {
            // deselect
            num_input = num_input - 1;
            document.getElementById("form"+ nr_div).innerHTML="";
            a=document.getElementById("nr_div"+ nr_div);
            a.className = a.className.replace(" selected","");
            
            document.getElementById("nr_div"+ nr_div).onclick = 'func(nr_div,0);';        
        }
    }
    test.html:
    Code:
    <html>
        <head>
            <link href="style.css" rel="stylesheet" type="text/css" />
            <script src="func.js"></script>
        </head>
        <body>
            <form action='test.php' method='post' id='form'>
                
            </form>
            <div id='nr_div0' class="box" onclick="func(0,0);">1</div>
            <div id='nr_div1' class="box" onclick="func(1,0);">2</div>
            <div id='nr_div2' class="box" onclick="func(2,0);">3</div>
        </body>
    </html>
    the selecting (class) works when I select a div, deselecting doesn't work because the onclick doesn't change.

    Also I can only insert one input, I thing I know why that is but is this the correct way or is there a way easier way?

    I prefer a non-JQuery anser because I don't want to load the whole framework for a couple lines...
    Last edited by derplumo; January 4th, 2014 at 02:21 PM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    I had to alter your code, because you had some errors in it (specifically the "nr" parameter of your function; you were referencing it as "nr_div" throughout your function, instead of "nr" and that was causing errors... just a simple mistake though), but I think this is what you were trying to do:
    Code:
    var num_input = 0;
    function func(nr,selected) {      
        if(selected === 0 && !((' ' + document.getElementById("nr_div"+ nr).className + ' ').indexOf(' selected ') > -1)) {
            // select
            num_input = num_input + 1;
            document.getElementById("form").innerHTML="<input type='hidden' id='form"+ nr +"' name='nr_div["+ num_input +"]' value='"+ nr +"'>";
            a=document.getElementById("nr_div"+ nr);
            a.className = a.className + " selected";
            document.getElementById("nr_div"+ nr).onclick = function() {
             func(nr,1);
            }
        }
        if(selected === 1 && num_input >= 1 && ((' ' + document.getElementById("nr_div"+ nr).className + ' ').indexOf(' selected ') > -1)) {
            // deselect
            num_input = num_input - 1;
            document.getElementById("form").innerHTML="";
            a=document.getElementById("nr_div"+ nr);
            a.className = a.className.replace(" selected","");
            document.getElementById("nr_div"+ nr).onclick = function() {
             func(nr,0);
            }      
        }
    }
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    ok now the selecting part is done, thanks.

    But how do I get it putting only the selected in a form, because I want to process it with php?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Originally Posted by derplumo
    ok now the selecting part is done, thanks.

    But how do I get it putting only the selected in a form, because I want to process it with php?
    Are you wanting the last selected or all of the div, that are selected?
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    all the divs that are selected, if I should compare it with normal inputs I would say that I want the checkboxes, and not the radio buttons...
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Then, I might do something like this:
    Code:
    <html>
        <head>
    <style>
    .box {
    background:red;
    color:white;
    }
    .selected {
    background:blue;
    color:white;
    }
    </style>
    <script>
    var count = 0;
    var num_input = 0;
    function func(nr,selected) {      
     var my_divs = document.getElementById("divs").getElementsByTagName("div");
        if(selected === 0 && !((' ' + document.getElementById("nr_div"+ nr).className + ' ').indexOf(' selected ') > -1)) {
            // select
    	num_input = num_input + 1;
            a=document.getElementById("nr_div"+ nr);
            a.className = a.className + " selected";
            document.getElementById("collection").value = "";
            count++;
            for(i=0;i<my_divs.length;i++){
             if(my_divs[i].className == "box selected"){
               if(count > 0){
                document.getElementById("collection").value += my_divs[i].id;
               }
               if(count >= 2){
                document.getElementById("collection").value += " ";
               }
             }
            }
    
             if(count >= my_divs.length){
    	    document.getElementById("collection").value = document.getElementById("collection").value.replace(/,\s$/, "");
             }
    
            document.getElementById("nr_div"+ nr).onclick = function() {
             func(nr,1);
            }
        }
       if(selected === 1 && num_input >= 1 && ((' ' + document.getElementById("nr_div"+ nr).className + ' ').indexOf(' selected ') > -1)) {
            // deselect
    	num_input = num_input - 1;
            a=document.getElementById("nr_div"+ nr);
            a.className = a.className.replace(" selected","");
            document.getElementById("nr_div"+ nr).onclick = function() {
             func(nr,0);
            }
              count--;
              var remove = "nr_div"+ nr;
              var EditTxt = document.getElementById("collection").value.replace(remove,"");
              document.getElementById("collection").value = EditTxt.replace(/^\s+/,"");
        }
    document.getElementById("collection").value = document.getElementById("collection").value.replace(/\s+$/,"");
    }
    
    function addSeperators()
    {
    document.getElementById("collection").value = document.getElementById("collection").value.replace(/\s/g,", ");
    }
    
    </script>
        </head>
        <body>
            <form action='test.php' method='post' id='form'>
                <input type="hidden" id="collection"/>
                <input type="button" value="Submit" onmousedown="addSeperators()">
            </form>
            <span id="divs">
            <div id='nr_div0' class="box" onclick="func(0,0);">1</div>
            <div id='nr_div1' class="box" onclick="func(1,0);">2</div>
            <div id='nr_div2' class="box" onclick="func(2,0);">3</div>
            </span>
        </body>
    </html>
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    I made a small adjustment in the html part, the type of the input must be a submit, not a button, else it doesn't submit the form.

    Now a small problem on the php side, I get the literal text "nr_div0, nr_div2". Not an array which would be easier to work with. Do you know something?
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Originally Posted by derplumothe
    type of the input must be a submit, not a button, else it doesn't submit the form.
    I am aware of that; I just made it a button, to simulate a demo for you.

    Originally Posted by derplumothe
    Now a small problem on the php side, I get the literal text "nr_div0, nr_div2". Not an array which would be easier to work with. Do you know something?
    You can add it to an array; if you chose to, but I think it's time for you to try to see what you can do, with that.

    Hint: Look into the push method; that should get you started.

    Good Luck
    Last edited by web_loone08; January 8th, 2014 at 01:19 PM. Reason: Offered OP A Hint
  16. #9
  17. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    While I have to admit that the push() method works great for js, I used the explode() function in php because I wanted to process it with php. Thanks again for the help.
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Originally Posted by derplumo
    While I have to admit that the push() method works great for js, I used the explode() function in php because I wanted to process it with php. Thanks again for the help.
    Yeah, I realized (later..., after I added the hint); that you meant you wanted to process the array server-side, instead of client-side. Although, I thought of mentioning using explode() via PHP; I was fairly confident you would find out about it on your own.

    I am glad you figured out how to get it to work.
    Last edited by web_loone08; January 11th, 2014 at 03:46 PM. Reason: Corrected Typo
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    yea well, I learned more js now

    Oh where are these lines for:
    Code:
    if(count >= my_divs.length){
    	    document.getElementById("collection").value = document.getElementById("collection").value.replace(/,\s$/, "");
             }
    Code:
    var EditTxt = document.getElementById("collection").value.replace(remove,"");
              document.getElementById("collection").value = EditTxt.replace(/^\s+/,"");
  22. #12
  23. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    I was using a Regular Expression in the replace() method; to replace unnecessary commas, at the beginning and end of the hidden text field value.
  24. #13
  25. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    The selected parameter doesn't change (in the browser then) but it still behaves like it does... why is this? Is this maybe a problem?
  26. #14
  27. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Originally Posted by derplumo
    The selected parameter doesn't change (in the browser then) but it still behaves like it does... why is this? Is this maybe a problem?
    You mean the "selected" class and it actually does change. If you look at your browser's web development console; you will see that the "selected" class is actually added/removed to the "box" class. You will not be able to see the change in the source code; as the change occurs after the source code is loaded and it's not a static change; it's a dynamic one, that happens with JavaScript DOM (which is what your code is using to change the class, on your input fields).
  28. #15
  29. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    436
    Rep Power
    8
    no I mean the parameter for the function, and the class changes in my browser (yes the code). And I think I wasn't clear the other time, I use the function 'inspect element' in Chrome to see the code...

    so I see the code as this:
    Code:
    <div id="nr_div0" class="box selected" onclick="func(0,0);">1</div>
    instead of:
    Code:
    <div id="nr_div0" class="box selected" onclick="func(0,1);">1</div>
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo