checkbox generate text

**DMR17** · 01-13-2012, 05:30 PM

Hi All,

I found a script on Dynamicdrive which is quite good for what I want. It is a checkbox which, when clicked, shows a corresponding text.

The plan is to create a number of checkboxes to make the creation of a quote easier (I will only have to click the modules the customer wants to get the right text blocks). After choosing the right modules, I will copy the outcome to word to add specific content for that customer.

The problem that I'm encountering is the following: the javascript creates a html list (ul, li), which shows bullets in word. Therefore, I'd like to change this.

Long story short: is there a way to change the code below in such a manner that no list is created, but (for example) div's? I'm most interested in the checkboxes rather than the dropdown.

Much obliged for any help you can give me

Best,
DMR

Code:

<html>
	<head>
		<title>Title</title>
		<script type="text/javascript">
			function getFormElementNumber(frm, elem) {
				for(var i = 0; i < frm.elements.length; i++) if(frm.elements[i] == elem) return i;
				return -1;
			}
			
			function getLoading() {
				var e = document.forms['genform'].elements,
					op = document.getElementById("opbox"),
					temphtml = "<ul>";
				for(var i = 0;i < e.length; i++) {
					temphtml += '<li style="' + (e[i].checked || (e[i].tagName == "select" && e[i].value != "") ? "" : "display:none") + ';">' + e[i].value + '</li>';
					e[i].onchange = function(){ genformChanged(this); };
					if(e[i].tagName == "input") toggleOpItem(e[i]);
					else if(e[i].tagName == "select") setOpItemText(e[i]);
				}
				temphtml += "</ul>";
				op.innerHTML = temphtml;
			}
			
			function toggleOpItem(el) {
				var cur = document.getElementById("opbox").getElementsByTagName("li")[getFormElementNumber(document.forms['genform'], el)].style.display;
				document.getElementById("opbox").getElementsByTagName("li")[getFormElementNumber(document.forms['genform'], el)].style.display = (cur == "none" && (el.type != "checkbox" || el.checked) ? "block" : "none");
			}
			
			function setOpItemText(el) {
				var op = document.getElementById("opbox").getElementsByTagName("li")[getFormElementNumber(document.forms['genform'], el)]
				var cur = op.innerHTML = el.value;
				el.value != "" ? op.style.display = "block" : op.style.display = "none";
				
			}
			
			function genformChanged(el) {
				var op = document.getElementById("opbox");
				if(el.tagName.toLowerCase() == "input") {
					if(el.type.toLowerCase() == "checkbox") {
						toggleOpItem(el);
					}
				} else if(el.tagName.toLowerCase() == "select") {
					setOpItemText(el);
				}
			}
			onload = getLoading;
		</script>
	</head>
	<body>
		<form name="genform" action="" method="">
			<select>
				<option></option>
				<option>Windows</option>
				<option>BSD</option>
				<option>Mac OS X / Darwin</option>
				<option>Linux</option>
			</select><br>
			<input type="checkbox" value="Powercycled modem">Powercycled<br>
			<input type="checkbox" value="Rebooted">Rebooted
		</form>
		<div id="opbox"></div>
	</body>
</html>

**fobos** · 01-17-2012, 03:33 PM

just use css styling to remove the bullets?

li {
list-style-type:none;
}

or use ul instead of li..

Thread: checkbox generate text

Thread Tools

Search Thread

checkbox generate text

Bookmarks

Bookmarks

Posting Permissions