Checkbox Creation

**enginemike** · Feb 9, 2013 12:03

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.

**Pullo** · Feb 9, 2013 15:03

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)?

**enginemike** · Feb 9, 2013 17:27

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.

**Pullo** · Feb 10, 2013 06:08

Hi there,

This is relatively straight forward to do.

You would do it in three steps:

Using PHP retrieve the number of rows in your database table and store it as a variable
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).
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>

**enginemike** · Feb 10, 2013 11:39

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.

**Pullo** · Feb 11, 2013 06:51

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.

Originally Posted by mike_2

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".

Originally Posted by mike_2

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.

**enginemike** · Feb 11, 2013 12:48

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.

**Pullo** · Feb 11, 2013 13:38

Hi there,

Originally Posted by mike_2

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.

**enginemike** · Feb 11, 2013 14:57

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.

**Pullo** · Feb 11, 2013 15:02

Hi there,

Glad we got it working

Originally Posted by mike_2

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.

User Tag List

Thread: Checkbox Creation

Thread Tools

Display

Checkbox Creation

Bookmarks

Bookmarks

Posting Permissions