PDA

View Full Version : checkbox values like php implode



gregincolumbus
Aug 11th, 2012, 06:39 PM
Hello,

I have a form I need to submit that contains a checkbox array. I need to combine the checkboxes that were selected into a comma delimited string. I am a javascript newbie....the value of the selected checkboxes needs to be placed in a field called USER 7


<!doctype html>
<html>
<head>

<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>
</head>
<script type="text/javascript" language="javascript">
var freeItemCount=0
var maxFreeItems=5


function setItems(item)
{
if(item.checked)
{freeItemCount=freeItemCount+1}


else
{freeItemCount=freeItemCount-1}


if (freeItemCount>maxFreeItems)
{item.checked=false
freeItemCount=freeItemCount-1
alert('You may only choose '+maxFreeItems+' items.')
}
}
</script>

<body>
<form id="form1" name="form1" method="post" action="http://www.somewebsite.com">

<table>
<tr>
<td height="20" colspan="3" valign="top" bgcolor="#cccccc"><span class="style4">Badge Categories/Levels (check up to 5)</span></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Elementary</span></div>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Elementary" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Middle School/Jr. High</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Middle School" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">High School</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value= "High School" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">College Faculty</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "College Faculty" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td height="20" colspan="2" bgcolor="#ffffff">&nbsp;</td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Choral</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Choral" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Band</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Band" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Orchestra</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Orchestra" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">General Music</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="General Music" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Piano/Keyboard</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value= "Piano/Keyboard" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">History/Theory/Composition</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="History/Theory/Comp" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Department Head/Supervisor</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Dept. Head/Supervisor" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">College Student</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="College Student" onclick="setItems(this)"></td>
</tr>


</table>

<input type="submit" value="Submit" ></td>
</form>
</body></html>

vwphillips
Aug 11th, 2012, 07:57 PM
<!doctype html>
<html>
<head>

<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>
</head>
<script type="text/javascript" language="javascript">
var freeItemCount=0
var maxFreeItems=5


function setItems(item)
{
if(item.checked)
{freeItemCount=freeItemCount+1}


else
{freeItemCount=freeItemCount-1}


if (freeItemCount>maxFreeItems)
{item.checked=false
freeItemCount=freeItemCount-1
alert('You may only choose '+maxFreeItems+' items.')
}
}
</script>
<script type="text/javascript">
/*<![CDATA[*/

function CheckBoxes(nme){
var frm=document.forms['form1'],els=frm.elements,ary=[],z0=0;
for (;z0<els.length;z0++){
if (els[z0].name=='badge[]'&&els[z0].checked){
ary.push(els[z0].value);
}
}
frm['USER7'].value=ary;
}
/*]]>*/
</script>
<body>
<form id="form1" name="form1" method="post" action="http://www.somewebsite.com" >

<table>
<tr>
<td height="20" colspan="3" valign="top" bgcolor="#cccccc"><span class="style4">Badge Categories/Levels (check up to 5)</span></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Elementary</span></div>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Elementary" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Middle School/Jr. High</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Middle School" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">High School</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value= "High School" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">College Faculty</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "College Faculty" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td height="20" colspan="2" bgcolor="#ffffff">&nbsp;</td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Choral</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Choral" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Band</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Band" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Orchestra</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value = "Orchestra" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">General Music</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="General Music" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Piano/Keyboard</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value= "Piano/Keyboard" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">History/Theory/Composition</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="History/Theory/Comp" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">Department Head/Supervisor</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="Dept. Head/Supervisor" onclick="setItems(this)"></td>
</tr>
<tr>
<td valign="top"><div align="right"><span class="style6">College Student</span></div></td>
<td height="20" colspan="2" bgcolor="#ffffff"><input type="checkbox" name="badge[]" id="badge[]" value="College Student" onclick="setItems(this)"></td>
</tr>


</table>
<input name="USER7" />
<input type="button" value="Test" onmouseup="CheckBoxes('badge[]');"></td>
</form>
</body></html>

gregincolumbus
Aug 11th, 2012, 08:08 PM
Thank you so much! That works perfectly. I REALLY appreciate it!

Philip M
Aug 11th, 2012, 08:27 PM
Another way to skin the cat:-


function setItems(item) {
if(item.checked) {
freeItemCount=freeItemCount+1;
}
else {
freeItemCount=freeItemCount-1
}

if (freeItemCount>maxFreeItems) {
item.checked=false;
freeItemCount=freeItemCount-1;
alert('You may only choose '+maxFreeItems+' items.');
}

var chosen = "";
var inputs = document.form1["badge[]"];
var len = inputs.length;
for (var i = 0; i <len; i++) {
if (inputs[i].checked) {
chosen += inputs[i].value + ","; // comma delimited list
}
}
chosen = chosen.replace(/\,$/,""); // strip final comma
alert (chosen);
//document.form1.USER7.value = chosen;
}
</script>

Old Pedant
Aug 12th, 2012, 05:18 AM
Your HTML is illegal, you know.


<input type="checkbox" name="badge[]" id="badge[]" value="..."/>

All your checkboxes have id="badge[]". That is illegal. IDs must by UNIQUE on a page.

There is no reason to give an id to those checkboxes, so simply remove the ids and you will be legal.

And pardon me, but I think the use of freeItemCount is silly. Just incorporate that into your list-building code.

And, finally, there is no reason at all for those <div>s and <span>s. You can just incorporate their characteristics into the styles of the <td>s. And you can drastically shrink the size of your HTML by using CSS.

So...


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr td {
background-color: white;
}
tr td:first-child {
vertical-align: top;
text-align: right;
height: 20px;
font-style: italic;
background-color: lightblue;
color: blue;
}
th.header {
background-color: #cccccc;
color: black;
font-size: large;
font-style: normal;
vertical-align: top;
}
</style>
</head>
<body>
<form id="form1" method="post" action="http://www.somewebsite.com">

<table>
<tr>
<th class="header" colspan="3">Badge Categories/Levels (check up to 5)</th>
</tr>
<tr>
<td>Elementary</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="Elementary"/></td>
</tr>
<tr>
<td>Middle School/Jr. High</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="Middle School"/></td>
</tr>
<tr>
<td>High School</td>
<td colspan="2"><input type="checkbox" name="badge[]" value= "High School"/></td>
</tr>
<tr>
<td>College Faculty</td>
<td colspan="2"><input type="checkbox" name="badge[]" value = "College Faculty"/></td>
</tr>
<tr>
<td style="background-color: white;" colspan="3">&nbsp;</td>
</tr>
<tr>
<td>Choral</td>
<td colspan="2"><input type="checkbox" name="badge[]" value = "Choral"/></td>
</tr>
<tr>
<td>Band</td>
<td colspan="2"><input type="checkbox" name="badge[]" value = "Band"/></td>
</tr>
<tr>
<td>Orchestra</td>
<td colspan="2"><input type="checkbox" name="badge[]" value = "Orchestra"/></td>
</tr>
<tr>
<td>General Music</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="General Music"/></td>
</tr>
<tr>
<td>Piano/Keyboard</td>
<td colspan="2"><input type="checkbox" name="badge[]" value= "Piano/Keyboard"/></td>
</tr>
<tr>
<td>History/Theory/Composition</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="History/Theory/Comp"/></td>
</tr>
<tr>
<td>Department Head/Supervisor</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="Dept. Head/Supervisor"/></td>
</tr>
<tr>
<td>College Student</td>
<td colspan="2"><input type="checkbox" name="badge[]" value="College Student"/></td>
</tr>
</table>
<input type="text" name="USER7" size="80" /><!-- you can change this to type=hidden of course -->
<br/>
<input type="submit" value="Submit" />
</form>

<script type="text/javascript">
(
function()
{
var form = document.getElementById("form1");

var badges = form["badge[]"];

// attach onclick handlers
for ( var b = 0; b < badges.length; ++b )
{
badges[b].onclick = badgeClicked;
}

function badgeClicked( )
{
var list = [];
for ( var b = 0; b < badges.length; ++b )
{
if ( badges[b].checked ) list.push( badges[b].value );
}
if ( list.length > 5 )
{
alert("You may not choose more than 5 items");
this.checked = false;
list = list.slice(0,5);
}
form.USER7.value = list;
}
}
)();
</script>
</body>
</html>