checkbox that generate text

**gavinv3** · 03-23-2006, 12:37 PM

Hi Guys,
This is my first time on the site .

I need some help with regards to a small tool which I want to create to help my friend generate notes automatically.

" Its a page with check boxes along with the discription besides it - for example - - ' checkbox and the following text besides it like 'Powercycle' '

Below the check box there is a 'Generate' button
Below the generate button is a text field

Now, what should happen is that - if I check the box and click the generate button then the text for eg. 'I have powercycled the modem ' should appear in the text field

The text 'I have powercycled the modem ' should not appear on the page - should be embedded somewhere in the script

I also would like to know a script that will copy all the text in the text field with a single button below the textfield

There will be multiple check boxes - so that before I click on the generate I can uncheck the options whose text I dont want to include in the textfield.

I would be more then gratefull if someone at the Dynamic Forums could help me with this

-- I will insert an image sometime today evening to depict what I am actually reffering to.

Warm Regards,
Gavin

**johnnyi** · 03-23-2006, 12:49 PM

Howdy,

What is your desired outcome if more than one checkbox is selected... Do you want all checked messages to appear - and if so, what type of break between (i.e. comma, carriage return), or do you want only one checkbox to be selected?

- I

**gavinv3** · 03-25-2006, 02:47 AM

Wow !!!

Hi Johnnyi,
Thanks for taking interest in my query, never expected a reply so fast.

- I am creating an html page with plenty of check boxes - one below the other (As shown in the image).
- I do technical troubleshooting over the phone - so it gets difficult to type while talking.

- Reason for creating this is to complete documentation faster without having to type while on the call.
- This is how it should work - All I have to do is to select the check boxes of the steps done on the call

- When I select a check box - nothing should appear in the text field at the bottom - So that I can change my choice anytime.

For example. If I was troubleshooting the issue on a Win98, then we connect a WinXP. - So First I would select Win98 then would change the choice to WinXP. (The final result of the text in the text field will be WinXP and not Win98)

- I would also like to have some dropdown selection menus - to avoid making the form lengthy.

- After I have finished selecting my choices in the form I just have to click the GENERATE button

- Text should appear in the text field at the botton - in the order they were selected. (As shown in Image)

- I would also like to have a button below the textarea where the text will be generated (That says COPY) - once clicked will copy all the text that is generated in the text field to the clipboard - So that it can be pasted else where

- Only text of the selected boxes should appear in the text field
- The text should appear one below the other (As shown in image)

- The form will show just a gist of the entire sentance that will appear in the text field (As shown in the image)
For example: Near the check box it will appear - Powercycled
- When the checkbox is selected and the Generate button is clicked the text in the textarea at the bottom should appear as: Powercycled the modem.

- Some places in the form I would like to have dropdown options where only one choice can be choosen (Just to avoid too much of clutter of check boxes)

- I have attached a dummy layout file - its in text format - Do save it with a .html extention to view the layout.

Thaking you in advance

Warm Regards,
Gavin

**Twey** · 03-25-2006, 12:02 PM

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>

**gavinv3** · 03-25-2006, 08:46 PM

Thanks Twey,
Your code is great!! Thanks again.

Is it possible to add some more functionality that will help edit the generated text or to add additional notes in a text field - For example in the dummy template I had put a box at the start where the callers name can be entered in the field with a selection for an id check. So that the text which is entered in the box should appear below.

Similarly if it is possible to have a multiple line textarea where one can type a paragraph

Is it possible to have the text appear in a textarea along with a copy button so that only the text that is generated can be copied ?

Warm regards
Gavin

Thread: checkbox that generate text

Thread Tools

Search Thread

checkbox that generate text

Thanks Johnnyi

Thanx

Bookmarks

Bookmarks

Posting Permissions