Home/ Questions/Q 9163797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:31:49+00:00

I have a script where I use checkboxes and javascript to display additional items

  • 0

I have a script where I use checkboxes and javascript to display additional items if the checkboxes are checked.
This seems to be working just fine most of the time.
There is one checkbox however that is giving problems.
I assume because of the javascript magic associated with it.
When checking it and then unchecking it, the checkbox always returns isset after post.

Never checking the checkbox and submitting returns not set as it should.
Checking and submitting returns checked as it should
checking, unchecking and submitting returns … checked!
I have set up an example on http://vampke.uphero.com/tst.php

Here is the code:

if($_SERVER['REQUEST_METHOD'] == 'POST') {
if(isset($_POST['se_currentitem'])) echo "CHECKBOX = ISSET";
else echo "CHECKBOX = NOT SET";
}

echo <<< EOD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.hiddenDiv {display: none;}
.visibleDiv{display: block;}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--

var currentitem = 0;

function toggle_currentitem(){
mydiv = document.getElementById("currentitemcontainer");
if (document.getElementById('se_currentitem').checked){
mydiv.className = "visibleDiv";
if(currentitem==0){
addcurrentitem();
}
}
else {
mydiv.className = "hiddenDiv";
}
}

function addcurrentitem(){
currentitem++;
var newitem = document.createElement('div');
newitem.id = currentitem;
newitem.innerHTML= "<p><strong><em>new item</em></strong><br /><label>select a number:</label><select name='se_currentitem[]'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></p>";

document.getElementById('currentitem').appendChild(newitem); 
}

//-->
</script>
<form action ="" method="post">
<input type="checkbox" id="se_currentitem" name="se_currentitem" value="1" onchange="toggle_currentitem()" /><label for="se_currentitem">click the checkbox to activate the items</label> <br />

<div id="currentitemcontainer" class="hiddenDiv">
<div id="currentitem"></div>
<a id='addnewcurrent' onclick='addcurrentitem()'>add item</a>
</div>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>

does anyone know what’s going on?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The checkbox is named se_currentitem and the select menu is named se_currentitem[]. PHP’s $_POST array treats these as the same.

    • When you check the box, you create the select menu.
    • When you uncheck the box, you hide the select menu, but it remains in the DOM, and is submitted by the browser. Notice in the Network inspector (or tcpflow, etc.). that the browser submits both se_currentitem and se_currentitem[].

    You should rename the checkbox so it is not called se_currentitem (or rename the select menu so it is not called se_currentitem[]).

    • 0