Adding text to textarea based on prompt and function declared value

[Ben Rogers]

Right, I'm totally lost on this one. I'm making a posting script (with PHP, which I actually get to some degree) and I'm trying to make a javascript to insert text into the textare (just like the one used by this forum). Now, I could just rip off the script used here, but not only would that be plagiarism, I'm trying to learn a bit of complex javascript. I may've been overambitious with this, and I also may've applied PHP syntax/ rules/ funtions that JS didn't have... I hope not, but I did my best, and nothing is happening at all... so I'm stuck.
JS: <script type="text/javascript">
<!-- Begin Javascript
//- Declare variables and arrays
var txt = document.post.txt.value;
var insertWhat = new Array("subtopic", "bold", "italic", "underlined", "link");
var insertMeBegin = new Array("[subtop]", "[b]", "[i]", "[u]");
var insertMeEnd = new Array("[/subtop]", "[/b]", "[/i]", "[/u]");

//- Function which makes prompt appear, checks legnth of insertWhat, then for each one,
//- if it is the same as what, it'll insert text in the textarea, then break the loop
function insert(what) {
var input = prompt("Type in the text you want to be"+input+".", "");
for(n=0; n < insertWhat.legnth, n++) {
if(what == insertWhat[n]) {
txt += insertMeBegin[n]+input+insertMeEnd[n];
break;
} else {
return;
}
}
}
// End Javascript -->
</script>
and the form's html <form action="/index.php?id=post" method="post" name="post">
<div>
<!-- Javascript powered buttons to activate functions to insert "keytext" to be parsed -->
<h3>Insert: </h3>
<input type="button" value="Sub topic" onclick="insert('subtopic')" />
<input type="button" value="Bold text" onclick="insert('bold')" />

<input type="button" value="Italic text" onclick="insert('italic')" />
<input type="button" value="Underlined text" onclick="insert('underlined')" />
<input type="button" value="Link" onclick="insert('link')" />
<!-- Actual form, topic for <h2></h2>, textarea for post -->
<textarea name="txt"></textarea>

</div>
</form>

EDIT: I tried changing the brackets to their respective ascii entities so it wouldn't mess up the post...

[Khalid Ali]

the following is your code I have removed the errors

<script type="text/javascript">
<!-- Begin Javascript
//- Declare variables and arrays

var insertWhat = new Array("subtopic", "bold", "italic", "underlined", "link");
var insertMeBegin = new Array("", "", "", "");
var insertMeEnd = new Array("", "", "", "");

//- Function which makes prompt appear, checks legnth of insertWhat, then for each one,
//- if it is the same as what, it'll insert text in the textarea, then break the loop
function insert(what) {
var txt = document.post.txt.value;
var input = prompt("Type in the text you want to be "+what+".", "");
for(n=0; n < insertWhat.legnth; n++) {
if(what == insertWhat[n]) {
txt += insertMeBegin[n]+input+insertMeEnd[n];
break;
} else {
return;
}
}
}
// End Javascript -->
</script>

[Ben Rogers]

I copied and pasted the code, line by line, and now it works slightly better, but besides the indentation, moving var txt, and some line breaks, what did you change?

OK, so now the array comes up, but still it doesn't add the text to the textarea. I s there something wrong with the selection? Just to be clear: <script type="text/javascript">
<!-- Begin Javascript
//- Declare variables and arrays
var insertWhat = new Array("subtopic", "bold", "italic", "underlined", "link");
var insertMeBegin = new Array("", "", "", "");
var insertMeEnd = new Array("", "", "", "");

//- Function which makes prompt appear, checks legnth of insertWhat, then for each one,
//- if it is the same as what, it'll insert text in the textarea, then break the loop
function insert(what) {
var input = prompt("Type in the text you want to be "+what+".", "");
for(n=0; n < insertWhat.legnth; n++) {
if(what == insertWhat[n]) {
document.post.msg.value += insertMeBegin[n]+input+insertMeEnd[n];
break;
} else {
return;
}
}
}
// End Javascript -->
</script>

Thanks... sorry I'm such a n00b with JavaScript..

[Paul Jr]

This works:

<script type="text/javascript">
//<![CDATA[
function insert(what) {
var txt = document.forms["post"]["txt"];
var format = new Array(
new Array("subtopic", "bold", "italic", "underline", "link"),
new Array("[subtop]", "[b]", "[i]", "[u]", "[url]"),
new Array("[/subtop]", "[/b]", "[/i]", "[/u]", "[/url]")
);
var input = prompt("Type in the text you want to be formatted.", "");
for(var n=0; n<format[0].length; n++) {
if(what == format[0][n]) {
txt.value += format[1][n] + input + format[2][n];
break;
}
}
}
//]]>
</script>

As of now, all the arrays have to be the same length for it to work. I don't see how it's a problem, since they have to be the same length anyways, but I figured I'd let ya know. ;)

[Ben Rogers]

Alright, thanks Paul,thanks Ali :) I added a thing for null prompts, and it works perfectly now. Thanks again :)

For search purposes: <script type="text/javascript">
//<![CDATA[
function insert(what) {
var txt = document.forms["post"]["txt"];
var format = new Array(
new Array("subtopic", "bold", "italic", "underline", "link"),
new Array("", "", "", "", ""),
new Array("", "", "", "", "")
);
var input = prompt("Type in the text you want to be "+what+".", "");
for(var n=0; n<format[0].length; n++) {
if(what == format[0][n]) {
if(input == null) {
break;
} else {
document.post.txt.value += format[1][n] + input + format[2][n];
break;
}
}
}
}
//]]>
</script>
<form action="/index.php?id=post" method="post" name="post">
<div>
<!-- Javascript powered buttons to activate functions to insert "keytext" to be parsed -->
<h3>Insert: </h3>
<input type="button" value="Sub topic" onclick="insert('subtopic')" />
<input type="button" value="Bold text" onclick="insert('bold')" />
<input type="button" value="Italic text" onclick="insert('italic')" />

<input type="button" value="Underlined text" onclick="insert('underline')" />
<!-- Actual form, topic for <h2></h2>, textarea for post -->
<textarea name="txt" cols="80" rows="10"></textarea>

</div>
</form>

[Paul Jr]

No problemo. ;)