Welcome to checkbox POSTing heaven

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Welcome to checkbox POSTing heaven

Post by Heavy »

As most of us know. Browsers don't send checkboxes when they are not checked, at form submission time.
I wrote a JS workaround for this. It works at least with IE 6 and MZ 1.4.
Try this script, call it whatever.php, and manipulate the value parameters of the checkboxes.

Code: Select all

<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<html>
	<head>
	<SCRIPT language="JavaScript1.3">
		
		// Note: Does not work with Netscape 4
		
		function processChecksOnSubmit()&#123;
			var ArrChk = document.getElementsByTagName('INPUT')
			for (var a = 0 ; a < ArrChk.length ; a++ )&#123;
				if (ArrChk.item(a).type == 'checkbox')&#123;
					createHidden(ArrChk.item(a).value,ArrChk.item(a).checked ? 'on' : 'off')
				&#125;
			&#125;
		&#125;
		function createHidden(idx,val)&#123;
			hidden = document.createElement('input')
			
			hidden.type='text' // change to 'hidden'...
			
			hidden.name='HdnArrChk&#1111;' + idx + ']'
			hidden.value=val
			document.forms&#1111;0].appendChild(hidden)
		&#125;
	</SCRIPT>
	<style>
	body &#123;font-family:verdana;font-size:8pt;&#125;
	</style>
	</head>
	<body>
		<FORM method="POST" onsubmit="processChecksOnSubmit()" id="form1" action="<?php echo basename($_SERVER&#1111;'SCRIPT_NAME'])?>">
			<input type="button" value="Ape"  onclick="" name="apeBtn"><br>
			<INPUT type="checkbox" name="ArrChk&#1111;]" value="10" ><INPUT type="checkbox" name="ArrChk&#1111;]" value="10" ><br>
			<INPUT type="checkbox" name="ArrChk&#1111;]" value="20" ><INPUT type="checkbox" name="ArrChk&#1111;]" value="20" ><br>
			<input type="text" value="Monkey" name="monkeyText" ><br>
			<INPUT type="checkbox" name="ArrChk&#1111;]" value="30" ><INPUT type="checkbox" name="ArrChk&#1111;]" value="30" ><br>
			<INPUT type="checkbox" name="ArrChk&#1111;]" value="40" ><INPUT type="checkbox" name="ArrChk&#1111;]" value="40" ><br>
			<INPUT type="checkbox" name="ArrChk&#1111;]" value="50" ><INPUT type="checkbox" name="ArrChk&#1111;]" value="50" ><br>
			<INPUT type="submit" value="submit">
			<br>
			This piece of JavaScript helps when POSTing checkboxes.<br>
			On submit, an array of hidden elements is created. It holds a representation of the checkboxes. <br>
			If a checkbox is checked, the hidden field gets the value 'on'. If not, it gets 'off'.<br>
			The index of the array is the same as the value of the checkbox.<br>
			If you leave the value of a checkbox empty, its corresponding hidden-field in the array is indexed with "&#1111;]" which <br>
			makes the PHP-array index increment in the same way as when using checkboxes with names like <i>name="CheckArray&#1111;]"</i>.
			<hr>
			<h4>Posting results:</h4>
			<table width=50%>
				<tr>
					<td valign="top" width="50%">
						<h5>ArrChk:</h5>
						<?php
						echo '<pre style="background:#eee;height:100%">';
						print_r($_POST&#1111;'ArrChk']);
						echo "</pre>";
						?>
					</td>
					<td valign="top" width="50%">
						<h5>HdnArrChk:</h5>
						<?php
						echo '<pre style="background:#eee;height:100%">';
						print_r($_POST&#1111;'HdnArrChk']);
						echo "</pre>";
						?>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
Let me know if there are bugs in it (expect for that it doesn't work with NS4).
Tell me If you like it.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

I've moved this to Client Side as it is a JavaScript solution.

Mac
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Post by Heavy »

Yeah, but it is very much PHP involved with the problem.
It's OK. I'll try to remember the reason why you moved it.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

I'm not sure about this as a solution - isn't it easier to assume that if a checkbox is not checked then it's value will not be sent and design forms and form handling accordingly rather than rely on something clientside which is just as subject to differences in browser implementations?

Mac
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Post by Heavy »

You may be right, it is not a perfect way of doing it.
I was thinking yesterday about making some abstraction wrapper around the $_POST['ChkBoxArr'] but ended up doing tricks with JS instead.
Post Reply