SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox Creation

    Hello

    I am working on a web site that creates check boxes using DOM.

    Creation is not an issue, however what I want to do is create an undetermined number of check boxes based on the contents of a database; sometimes I might need five and at other times I might need eleven. I keep thinking in terms of a for/next loop, or something along those lines.

    So far I have met with failure.

    Does anyone have any ideas or is what I am trying to do not possible.

    Any comments would be greatly appreciated.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    How are you querying your database?
    Are you working in PHP (or some other server side language), or are you using JavaScript and AJAX (for example)?

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response

    I am using mySql and PHP on the server side. It is my intent to obtain the number of check boxes by querying the database; the number of check boxes needed equals the number of rows.

    On the user side I am using javascript and dom to create the pages. I am using the javascript and dom to create pop up windows to manipulate data.

    Do not know anything about ajax. Maybe I should?

    Also, I am using a smarty 3 template engine.

    Hope this is useful.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    This is relatively straight forward to do.

    You would do it in three steps:
    1. Using PHP retrieve the number of rows in your database table and store it as a variable
    2. At the bottom of your document, open a <script> tag and assign the PHP variable to a JavaScript variable, (simply by echoing the PHP variable).
    3. As you rightly say, use a for loop to output the check boxes.
    Here's some code to do all of this:

    Code:
    <?php
      $con = mysql_connect("server.com","user","pswd");
      if (!$con) {
        die('Could not connect: ' . mysql_error());
      }
      mysql_select_db("db", $con);
      $result = mysql_query("select count(1) FROM table");
      $row = mysql_fetch_array($result);
      $totalRows = $row[0];
      echo "Total rows: " . $totalRows;
      
      mysql_close($con);
    ?>
    
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Create checkboxes</title>
      </head>
      
      <body>
        <p>Here are the check boxes:</p>
        <div id="checkboxContainer"></div>
        
        <script>
          var numCheckbxes = <?php echo($totalRows) ?>;
          var frag = document.createDocumentFragment();
          
          for (i=0; i< numCheckbxes; i++){
            var cb = document.createElement('input');
            cb.type = 'checkbox';
            cb.name = 'myCheckbox[]';
            cb.value = 'checkbox-' + i;
            frag.appendChild(cb);
          }
          document.getElementById("checkboxContainer").appendChild(frag);
        </script>
      </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Thank you for your response. The code you supplied will indeed work for a (for lack of better words) a normal html page, however I probably did not make myself very clear. And here may be a flaw on my part as I may be looking at the whole thing wrongly.

    I have found that to do as you suggest for a pop window takes up space as I would need to create a div and then make it visible or invisible as needed. I suppose I could solve that problem by creating another file. This makes the page long and, if you will allow my vanity, upsets my sense of the tidy.

    I have solved this problem by using the DOM method. I create pop ups on the fly using the DOM method via a javascript file. The pages take up no space, and are created and destroyed as needed; the pop ups also interact with the main page quite nicely. That is where I have the problem.

    The code I am using is (sorry, I have not yet figured out how to create that neat code box)

    more stuff before...
    Code JavaScript:
    for (i-0; i<3; i++ )
    		{
    			checkbox[] = document.createElement('input');
    			checkbox[].setAttribute('id', 'checkbox_seven');
    			checkbox[].setAttribute('name', 'checkbox_seven');
    			checkbox[].setAttribute('type', 'checkbox');
    			checkbox[].style.position = "absolute";
    			checkbox[].style.left = '200px';
    			if (i == 0)
    			{
    				checkbox[].style.top = '50px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '90px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '120px';
    			}
    			checkbox[].style.top = '50px';
     
    			checkbox_span[] = document.createElement('span');
    			checkbox_span[].style.position = "absolute";
    			checkbox_span[].style.left = '228px';
    			checkbox_span[].style.top = '50px'; (note: did not include the check here for brevity)
    			checkbox_span[].appendChild(document.createTextNode('Test'));
     
    			checkboxDiv.appendChild(checkbox_seven[]);
    			checkboxDiv.appendChild(checkbox_span_seven[]);
    		}

    I have found that javascript logic works, for example the if check, but for some reason the for/next loop does not. I was looking at the code again this morning and wonder if that is not the problem. Maybe you can see the problem.

    Then again you might point out that I am being silly and the real solution is........

    By the way, I have followed the link on the bottom your reply and really like your counter. If you do not mind I plan on stealing the thing.

    Anyway I really appreciate your response and help.
    Last edited by cpradio; Feb 11, 2013 at 06:34. Reason: misspelling added code tags

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I'm afraid I'm a little confused.
    Could you please explain again what you are trying to accomplish.

    So far we have established that you want to create a specific number of check boxes, based on the number of rows in one of your database tables.
    The rest went over my head.

    Quote Originally Posted by mike_2 View Post
    The code I am using is (sorry, I have not yet figured out how to create that neat code box)
    When you are writing a reply, click "Go Advanced", then you will see a syntax highlighter.
    Highlight the code you want in a box and choose the correct syntax from the dropdown.
    On the very right of the second row you also have three shortcuts for "Code", "HTML" and "PHP".

    Quote Originally Posted by mike_2 View Post
    By the way, I have followed the link on the bottom your reply and really like your counter. If you do not mind I plan on stealing the thing.
    Glad you liked it. Thanks
    Please note that the number set is not mine and I asked the original author (whose details appear on the page) for permission to use it.
    Also, if you do end up using the script, I would appreciate a comment on the blog post, maybe with a link to the page where we can see it in action.

    So, sorry I couldn't understand your issue.
    If you provide a little further explanation, I'm sure we'll soon get to the bottom of it.

  7. #7
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I am really at a loss here. I will try again one more time, but I do not mean to weary you as I am most appreciative of your replies

    Getting a value from the database is not a problem. That I can do.

    Under normal circumstances one creates a check box using the syntax

    <input type='checkbox' .....>

    I also understand that you can use a for/next loop to create a series of check boxes.

    This is not what I am doing. I am using javascript/DOM to create a check box with the following typical syntax

    Code JavaScript:
    checkbox_one = document.createElement('input');
    		checkbox_one.setAttribute('id', 'checkbox_one');
    		checkbox_one.setAttribute('name', 'checkbox_one');
    		checkbox_one.setAttribute('type', 'checkbox');
    		checkbox_one.style.position = "absolute";
    		checkbox_one.style.left = '10px';
    		checkbox_one.style.top = '10px';

    I then go on to attach the code using the syntax

    Code JavaScript:
    checkboxDiv.appendChild(checkbox_one);
    buttonDiv.appendChild(checkboxDiv);
    selectDiv.appendChild(buttonDiv);

    In this case I need 7 check boxes.

    In order to keep going I manually created seven check boxes and all is well.

    However, in order to reduce the amount of code required I was looking at using a loop. Also, I would like to be able to determine the number if check boxes automatically so I do not have to revise the code in the event the number (extracted from the database) changes.

    As an example

    Code JavaScript:
    if (name == 'email_list')
    		{
    			button_two.setAttribute('value', 'Delete Email');
    		}
    		else
    		{
    			button_two.setAttribute('value', 'Delete Style');
    		}

    works.

    However
    Code JavaScript:
    for (i=0; i<3; i++ )
    		{
    			checkbox[] = document.createElement('input');
    			checkbox[].setAttribute('id', 'checkbox_seven');
    			checkbox[].setAttribute('name', 'checkbox_seven');
    			checkbox[].setAttribute('type', 'checkbox');
    			checkbox[].style.position = "absolute";
    			checkbox[].style.left = '200px';
    			if (i == 0)
    			{
    				checkbox[].style.top = '50px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '90px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '120px';
    			}
     
    			checkbox_span[] = document.createElement('span');
    			checkbox_span[].style.position = "absolute";
    			checkbox_span[].style.left = '228px';
    			checkbox_span[].style.top = '50px';
    			checkbox_span[].appendChild(document.createTextNode('Test'));
     
    			checkboxDiv.appendChild(checkbox_seven[]);
    			checkboxDiv.appendChild(checkbox_span_seven[]);
    		}

    does not work. Either I have gotten the syntax for check box creation wrong or this idea will not work.

    I am trying to find out if my coding is in error or if my thinking on the subject is wrong. I find that in many cases the problem lies in incorrect understanding of a subject, but the trick is finding out which is which.

    Regarding the counter I will be happy to post a comment. I am thinking about using a database table rather than a file. We will see. And yes, I understand the issue regarding the number set.

    As for my name I tried logging in one time and went to change my password and managed to change my user name also. I intend to go to my profile and set matters straight.

    Again, thank you for your kind reply.

    Best regards.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by mike_2 View Post
    Code JavaScript:
    for (i=0; i<3; i++ )
    		{
    			checkbox[] = document.createElement('input');
    			checkbox[].setAttribute('id', 'checkbox_seven');
    			checkbox[].setAttribute('name', 'checkbox_seven');
    			checkbox[].setAttribute('type', 'checkbox');
    			checkbox[].style.position = "absolute";
    			checkbox[].style.left = '200px';
    			if (i == 0)
    			{
    				checkbox[].style.top = '50px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '90px';
    			}
    			if (i == 2)
    			{
    				checkbox[].style.top = '120px';
    			}
     
    			checkbox_span[] = document.createElement('span');
    			checkbox_span[].style.position = "absolute";
    			checkbox_span[].style.left = '228px';
    			checkbox_span[].style.top = '50px';
    			checkbox_span[].appendChild(document.createTextNode('Test'));
     
    			checkboxDiv.appendChild(checkbox_seven[]);
    			checkboxDiv.appendChild(checkbox_span_seven[]);
    		}

    does not work. Either I have gotten the syntax for check box creation wrong or this idea will not work.
    The problem is being caused by the two square brackets you use after checkbox, checkbox_span, checkbox_seven and checkbox_span_seven
    In JavaScript square brackets denote an array.

    A further problem is that:

    Code JavaScript:
    if (i == 2){
      checkbox[].style.top = '90px';
    }

    will always get overridden by:

    Code JavaScript:
    if (i == 2){
      checkbox[].style.top = '120px';
    }

    Maybe you want to change the value in the first if statement to one?

    Also, in the example above checkboxDiv, checkbox_seven and checkbox_span_seven are all undefined.

    Try this instead:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>For loop to create checkboxes</title>
      </head>
      <body>
        <div id="checkBoxes"></div>
        <script>
          for (i=0; i<3; i++ ){
            checkbox = document.createElement('input');
            checkbox.setAttribute('id', 'checkbox_seven');
            checkbox.setAttribute('name', 'checkbox_seven');
            checkbox.setAttribute('type', 'checkbox');
            checkbox.style.position = "absolute";
            checkbox.style.left = '200px';
            if (i == 0)	{
              checkbox.style.top = '50px';
            }
            if (i == 1)	{
              checkbox.style.top = '90px';
            }
            if (i == 2) {
              checkbox.style.top = '120px';
            }
            
            checkbox_span = document.createElement('span');
            checkbox_span.style.position = "absolute";
            checkbox_span.style.left = '228px';
            checkbox_span.style.top = '50px';
            checkbox_span.appendChild(document.createTextNode('Test'));
            checkboxDiv = document.getElementById("checkBoxes");
            checkboxDiv.appendChild(checkbox);
          }
        </script>
      </body>
    </html>
    I hope this helps.

  9. #9
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Taking out the brackets is just the ticket! I am sitting here looking at the new check boxes. Thank you. I figured I was doing something wrong but just could not see what.

    The mechanics of the thing are now simple. And thanks for pointing out the numbering error. Yes, I understand there is stuff missing; I was just concentrating on that which was causing me a problem.

    I have another question if you do not mind. You give me examples using a <div> tag in the body of the document. I am using the javascript/DOM approach outside of the document because it allows me to create/remove and append functionality/screen exclusive of the document proper - I sort of think of it as popup functionality. This method takes no space; I used this on another project with good results. If you have no problem I can send you some screenshots/code to explain myself more clearly. If there is a better way I would like to learn about it.

    Anyway, thank you for your guidance. And I will post something regarding the counter when I get to that point.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Glad we got it working

    Quote Originally Posted by mike_2 View Post
    I have another question if you do not mind. You give me examples using a <div> tag in the body of the document. I am using the javascript/DOM approach outside of the document because it allows me to create/remove and append functionality/screen exclusive of the document proper - I sort of think of it as popup functionality. This method takes no space; I used this on another project with good results. If you have no problem I can send you some screenshots/code to explain myself more clearly. If there is a better way I would like to learn about it.
    Yeah no problem.
    If you could post a condensed example here, I would be happy to take a look at it, or alternatively, a link to a site where I can see it in action.


Bookmarks

Posting Permissions

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