Generate text on click

[keithcorwin]

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.

Thanks!

[AleMonteiro]

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

[keithcorwin]

Here's the code that i'm currently using

javascript

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

HTML

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


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

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

[AleMonteiro]

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

[keithcorwin]

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.

[AleMonteiro]

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

[printersdelhi]

Hi dear, Please consult any good computer programmer.