/    Sign up×
Community /Pin to ProfileBookmark

Passing Form Controls as Variables

Let me first start out by saying, I officially SUCK at Javascript. I have in fact searched this Forum and many others looking for exactly what I need.

I am working on a small project, that, like this forum uses some Custom HTML Tags. It appears that many people want to implement a TextArea box with buttons that insert tags in a specific cursor location.

I found the code listed here:
[URL=http://www.webdeveloper.com/forum/showthread.php?t=72414]http://www.webdeveloper.com/forum/showthread.php?t=72414[/URL]

The Code is as Follows:

[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<HTML lang=”en”>
<HEAD>
<TITLE>Text Editor</title>
<META http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<META name=”Content-Script-Type” content=”text/javascript”>
<SCRIPT type=”text/javascript”>
<!–

function insertCode(){
var subject=document.forms.myForm.myTextarea;
if (document.selection) {
var range=document.selection.createRange();
if (range.parentElement()==subject) {
range.text=arguments[0]+(arguments[1]?range.text+arguments[1]:””);
return;
}
}
else if (subject.selectionStart || subject.selectionStart==’0′) {
var str=subject.value;
var a=subject.selectionStart, b=subject.selectionEnd;
subject.value=str.substring(0,a)+arguments[0]+(arguments[1]?str.substring(a,b)+arguments[1]:””)+str.substring(b, str.length);
return;
}
subject.value+=arguments[0]+(arguments[1] || “”);
};

//–>
</SCRIPT>
</HEAD>

<BODY>

<FORM name=”myForm”>
<TEXTAREA name=”myTextarea” cols=”32″ rows=”7″>aaa</TEXTAREA><BR>
<INPUT type=”button” value=”Bold” onclick=”insertCode(‘[B]’, ‘[/B]’);”>
<INPUT type=”button” value=”Smiley” onclick=”insertCode(‘:)’);”>
</BODY>
</HTML>
[/code]

Now, to my question. I have tried for about 5 hours to make it so that I use ONE Function (InsertCode) and pass it a form control to ultimately return the text to.

Reason is, I have 5 different TextAreas, with 5 different buttons for each. I don’t want to write 25 functions if I don’t have to. So I figured there HAS to be a way to include the TextArea you want it to return to in the onClick portion. All my tests have failed. But as I said before, I SUCK at Javascript.

I am assuming it’s possible, and I apologize if I was not able to find an answer that was looking right at me, but I did put a lot of effort into this before posting this question.

Any help would be greatly appreciated…

-Brad

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 26.2005 — Pass a reference to the form and have unique form [I]id[/I]s:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Text Editor&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=us-ascii"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--

function insertCode(){
var subject=arguments[0].myTextarea;
if (document.selection) {
var range=document.selection.createRange();
if (range.parentElement()==subject) {
range.text=arguments[1]+(arguments[2]?range.text+arguments[2]:"");
return;
}
}
else if (subject.selectionStart || subject.selectionStart=='0') { <br/>
var str=subject.value;
var a=subject.selectionStart, b=subject.selectionEnd;
subject.value=str.substring(0,a)+arguments[1]+(arguments[2]?str.substring(a,b)+arguments[2]:"")+str.substring(b, str.length);
return;
}
subject.value+=arguments[1]+(arguments[2] || "");
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="myForm1" id="myForm1"&gt;
&lt;div&gt;
&lt;textarea name="myTextarea" cols="32" rows="7"&gt;aaa&lt;/textarea&gt;
&lt;br&gt;
&lt;input type="button" value="Bold" onclick="insertCode(this.form, '', '');"&gt;
&lt;input type="button" value="Smiley" onclick="insertCode(this.form, ':)');"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;form name="myForm2" id="myForm2"&gt;
&lt;div&gt;
&lt;textarea name="myTextarea" cols="32" rows="7"&gt;aaa&lt;/textarea&gt;
&lt;br&gt;
&lt;input type="button" value="Bold" onclick="insertCode(this.form, '', '');"&gt;
&lt;input type="button" value="Smiley" onclick="insertCode(this.form, ':)');"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@candelbcauthorSep 26.2005 — That worked for multiple forms.. What I need is multiple TextAreas with different names, in the same form.

I tried a couple of different things, but none worked..

I think I want to pass it the this.Form.MyFirstTextArea as the first argument, but that doesn't seem to work..

-Brad
Copy linkTweet thisAlerts:
@FangSep 26.2005 — &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Text Editor&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=us-ascii"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--

function insertCode(){
var subject=document.myForm.elements[arguments[0]];
if (document.selection) {
var range=document.selection.createRange();
if (range.parentElement()==subject) {
range.text=arguments[1]+(arguments[2]?range.text+arguments[2]:"");
return;
}
}
else if (subject.selectionStart || subject.selectionStart=='0') { <br/>
var str=subject.value;
var a=subject.selectionStart, b=subject.selectionEnd;
subject.value=str.substring(0,a)+arguments[1]+(arguments[2]?str.substring(a,b)+arguments[2]:"")+str.substring(b, str.length);
return;
}
subject.value+=arguments[1]+(arguments[2] || "");
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="myForm" id="myForm"&gt;
&lt;div&gt;
&lt;textarea name="myTextarea1" cols="32" rows="7"&gt;aaa&lt;/textarea&gt;
&lt;br&gt;
&lt;input type="button" value="Bold" onclick="insertCode('myTextarea1', '', '');"&gt;
&lt;input type="button" value="Smiley" onclick="insertCode('myTextarea1', ':)');"&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;textarea name="myTextarea2" cols="32" rows="7"&gt;aaa&lt;/textarea&gt;
&lt;br&gt;
&lt;input type="button" value="Bold" onclick="insertCode('myTextarea2', '', '');"&gt;
&lt;input type="button" value="Smiley" onclick="insertCode('myTextarea2', ':)');"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@candelbcauthorSep 26.2005 — Thank you SO much.. It does make sense now.. I appreciate all of your time today.
Copy linkTweet thisAlerts:
@candelbcauthorSep 27.2005 — One more question if I may about the insertCode function..

One of the strings that I would like to insert includes Quotation marks. The example would be:

<LINKDOC dID="1415">

It would work like the smiley in the example where it "[I]SHOULD[/I]" place <LINKDOC dID=""> in place of the cursor.

I can't seem to include the Quotation marks as a part of the insertCode line. Note: I did try using " as part of the string. No luck..

<i>
</i>&lt;input type="button" value="Smiley" onclick="insertCode('myTextarea1', '&lt;LINKDOC dID=""&gt;');"&gt;


Any thoughts?
Copy linkTweet thisAlerts:
@FangSep 27.2005 — <LINKDOC dID=&quot;&quot;>
Copy linkTweet thisAlerts:
@candelbcauthorSep 27.2005 — You know, I don't know what I would do without you...
×

Success!

Help @candelbc spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...