Tweet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Value of checkboxes appearing in text box</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
label {
display:block;
margin:10px;
}
textarea {
display:block;
}
</style>
<script type="text/javascript">
function getElementsByTagAndClassName(tag,cname) {
var tags=document.getElementsByTagName(tag);
var cEls=new Array();
for (i=0; i<tags.length; i++) {
var rE = new RegExp("(^|\\s)" + cname + "(\\s|$)");
if (rE.test(tags[i].className)) {
cEls.push(tags[i]);
}
}
return cEls;
}
function fillBox(tag, cname, target) {
var boxes=getElementsByTagAndClassName(tag,cname)
for (j=0; j<boxes.length; j++) {
boxes[j].onclick=function() {
document.getElementById(target).innerHTML="";
for (k=0; k<boxes.length; k++) {
if (boxes[k].checked==true) {
var item=document.createTextNode(boxes[k].value+"\r");
document.getElementById(target).appendChild(item);
}
}
}
}
}
window.onload=function() {fillBox('input','item','order')};
</script>
</head>
<body>
<form name="theform" id="theform">
<fieldset>
<legend>Legend</legend>
<label>You've ordered:</label> <textarea type="text" name="order" id="order" /></textarea>
<label>Item 1 <input class="item" type="checkbox" name="item1" value="Item 1" /></label>
<label>Item 2 <input class="item" type="checkbox" name="item2" value="Item 2" /></label>
<label>Item 3 <input class="item" type="checkbox" name="item3" value="Item 3" /></label>
</fieldset>
</form>
</body>
</html>
Comment