Hi Everyone,

This is a simple problem. I'm making a flowchart-based troubleshooting guide. There are checkboxes on each process box which will generate a text when the checkbox is clicked. The generated text would be on a textfield area which a user can copy.

hope anyone can help me with this.


Recommended Answers

What's your problem about it? What doesn't work? Did you write anything yet?

Jump to Post

Just change the <div> to an <input type="text" > or an <textarea> and adept the genformChanged function

Jump to Post

All 6 Replies

What's your problem about it? What doesn't work? Did you write anything yet?

Here's the code that i'm currently using


<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") {
} else if(el.tagName.toLowerCase() == "select") {
onload = getLoading;


<form name="genform" action="" method="">
  <input name="camera" type="checkbox" id="camera" value="<b>Which Product?</b> <br\> <br\> <br\> Camera" />

<div id="opbox"></div>

This code generates text on a div. I need it to generate text on a text field area instead.

Just change the <div> to an <input type="text" > or an <textarea> and adept the genformChanged function

i tried

<textarea name="opbox" id="opbox" cols="" rows=""></textarea>

The problem is, it's displaying the values without me clicking on the checkboxes which defeats the purpose. Also, the values displays aren't formatted.

Any help would be appreciated.

Sorry, I didn't realised it before, but this won't work.

Your functions create html content and insert them into the opbox <div>, and <textarea> don't render html.

If you really want to display in an <textarea> you will need to write only text and not html. And I'm not sure, but I think <textarea> display line breaks as /n and not <br/>

Hi dear, Please consult any good computer programmer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.