PDA

View Full Version : checkbox that generate text



gavinv3
03-23-2006, 12:37 PM
Hi Guys,
This is my first time on the site .:p
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 :D

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
<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