Creating checkboxes dynamically document.createElement

**epots9** · Aug 31 '07, 07:27 PM

add this:

[code=javascript]
cb.name = "id";
[/code]

php post uses the name attribute, so since u didn't have one set it couldn't find what your looking for.

good luck

**epots9** · Aug 31 '07, 08:32 PM

one thing i noticed is that all your checkboxes will have the same name/id, u'll need to set it up so they are different.

**markrawlingson** · Aug 31 '07, 08:48 PM

Here you go, this should work just fine.. I set the name and created a method for counting the checkboxes as you create them. The number is then appended to the name of the checkboxes to you would references them by their number. In this way, each checkbox will indefinately have a unique name for which you can refer to in your php script. Note that the number appended to the name is kept track of using a hidden form field.

first checkbox created = 0, second = 1, etc (or you could replace the hidden form field's value with "1" - then first checkbox created = 1

..Well, you get the idea, i'm sure!

[CODE=javascript]
<html>
<head>
<script language="Javas cript">

function append()
{
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 = "name"+i;
cb.value = "test";
cb.checked = true;
var text = document.create TextNode( "checkbox" );
document.getEle mentById( 'append' ).appendChild( text );
document.getEle mentById( 'append' ).appendChild( cb );
document.getEle mentById( "iCheckboxe s" ).value = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value) + 1;
}

</script>
</head>
<body>
<p>click the button below</p>
<form action="http://localhost/test.php" name="form" id="form" method="post" enctype="multip art/form-data">
<div id="append" name="append">A ppend here</div>
<input type="hidden" value="0" name="iCheckbox es" id="iCheckboxes ">
<input type="button" value="append" onclick="javasc ript:append()" />
<input type="submit" value="submit" />
</form>
</body>
</html>
[/CODE]

**Sebarry** · Aug 31 '07, 10:23 PM

Thanks for your help guys. I didn't realise I missed setting the id. What I would like, however, is to have an array of checkboxes so they all have the same name/id

Code:

 cb.id = "id[]" cb.name = "id[]"

but each checkbox has a different value. Then when the form is submitted I can get a list of the checkbox checked. It's a group of checkboxes really. When I do this I don't get anything through

Code:

$_POST

.

[CODE=javascript]
<html>
<head>
<script language="Javas cript">

function append()
{
var i = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value);
var cb = document.create Element( "input" );
cb.type = "checkbox";
cb.id = "id[]"
cb.name = "id[]"
cb.value = "test" + i;
cb.checked = true;
var text = document.create TextNode( "checkbox" );
document.getEle mentById( 'append' ).appendChild( text );
document.getEle mentById( 'append' ).appendChild( cb );
document.getEle mentById( "iCheckboxe s" ).value = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value) + 1;
}

</script>
</head>
<body>
<p>click the button below</p>
<form action="http://localhost/test.php" name="form" id="form" method="post" enctype="multip art/form-data">
<div id="append" name="append">A ppend here</div>
<input type="hidden" value="0" name="iCheckbox es" id="iCheckboxes ">
<input type="button" value="append" onclick="javasc ript:append()" />
<input type="submit" value="submit" />
</form>
</body>
</html>
[/CODE]

**markrawlingson** · Aug 31 '07, 11:57 PM

Well,

You can't set a check box's value, for starters. A checked checkbox is returned as "on" to your server side script, an unchecked checkbox is not even returned at all and will be null. Check boxes are basically boolean type data. True or false. On or off. Checked or unchecked. 1 or 0. - etc

Why is $POST returning nothing? Er, well - I removed your enctype=multipa rt/form-data" and it does - including the value of "on" for all 5 checkboxes i created and checked. Though i'm not quite sure why that made a difference.. I think that enctype is used for the GET method to encrypt the data through the querystring.. not sure about that one though. Anyway, it works using POST if you remove that.

Mark

**Sebarry** · Sep 1 '07, 06:39 AM

Hi Mark,

I don't know what I'm doing wrong. Here's my code again. This is all that I'm getting in $_POST if I create three checkboxes by clicking 'Append' and then 'Submit'.

Code:

array(0) { } array(1) { ["iCheckboxes"]=> string(1) "2" }

.

[CODE=javascript]
<html>
<head>
<script language="Javas cript">

function append()
{
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 = "name"+i;
cb.checked = true;
var text = document.create TextNode( "checkbox" );
document.getEle mentById( 'append' ).appendChild( text );
document.getEle mentById( 'append' ).appendChild( cb );
document.getEle mentById( "iCheckboxe s" ).value = parseInt(docume nt.getElementBy Id( "iCheckboxe s" ).value) + 1;
}

</script>
</head>
<body>
<p>click the button below</p>
<form action="http://localhost/test.php" name="form" id="form" method="post">
<div id="append" name="append">A ppend here</div>
<input type="hidden" value="0" name="iCheckbox es" id="iCheckboxes ">
<input type="button" value="append" onclick="javasc ript:append()" />
<input type="submit" value="submit" />
</form>
</body>
</html>
[/CODE]

Maybe you could send me your code again.

Thanks,

Sean

**markrawlingson** · Sep 1 '07, 09:05 PM

This is all that I'm getting in $_POST if I create three checkboxes by
clicking 'Append' and then 'Submit'.

I'm assuming that by your statement above that after you created the 3 checkboxes you didn't check them. If a checkbox is not checked - it returns a value of null or "" or Empty - it's not returned to your code what so ever.

Otherwise the code looks pretty solid.

I will run it again later on, gotta go out for a bit here... but try creating 3 checkboxes, check them, and then submit the form and see what you get.

Sincerely,
Mark

**Sebarry** · Sep 1 '07, 10:02 PM

Hi Mark,

I've been a right doofus!!!! You're right I wasn't checking the checkboxes. Only creating them. I should have realised by what you said before and I should have known any way that checkboxes are boolean.

Oh well thanks so much for your time. I'm very grateful.

Have a good evening.

Sean

**markrawlingson** · Sep 1 '07, 10:44 PM

No problem!

Well actually a lot of people think that checkboxes are returned as "off" if they aren't checked, and "on" if they are - but it's simply just not returned what so ever if it's not checked!

It's kind of silly actually.. You wouldn't see boolean type data anywhere else that JUST has a value of TRUE if it's true and a value of NULL if it's false right?

Creating checkboxes dynamically document.createElement

Creating checkboxes dynamically document.createElement

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment