...

View Full Version : Generating buttons for <b> and </b>



joonstar
12-21-2003, 04:11 AM
<textarea name="message"
cols="90"
rows="20"
wrap="virtual"></textarea>

I have the above textarea to make users to input their messages.

Let's suppose the followings:

(1) a user is entering a message, i.e. " My name is John".

(2) He want to focus on his name "John" in the message.

(3) If he knows HTML, he can make his message "My name is <b>John</b>".

(4) But he doesn't know HTML. or although he knows it a little it's not easy to enter <b> and </b>


So, I like to make two buttons.

One is for <b> and the other is for </b>.

After he enters "My name is", he clicks the <b> button.
And after he enters " John", He clicks the </b> button.
Then, it'll automatically generate <b> and </b>, so the message will be "My name is <b>John</b>.


Can I do that with javascript?


Thanks in Advance

me'
12-21-2003, 05:47 PM
Sure. Give your textarea an id, then:
function addstuff(towhere, addwhat) {
document.getElementById(towhere).innerHTML += addwhat}Then add onclick="addstuff('id', '<b>');" and onclick="addstuff('id', '</b>');" to the respective buttons.

If that doesn't work, try calling addstuff('id', '&lt;b&gt;');

joonstar
12-21-2003, 10:51 PM
<script language="javascript">
function addstuff(towhere, addwhat) {
document.getElementById(towhere).innerHTML += addwhat}
</script>

<input type="submit" value="<b>" onclick="addstuff
('BBBB', '<b>');">

<input type="submit" value="</b>" onclick="addstuff
('BBBB', '</b>');">




<form action="action.php>

<textarea name="message" cols="76 id="BBBB" rows="20> </textarea>
<input type="submit" value=" click ">
</form>


What's wrong in my code?

fredmv
12-21-2003, 11:31 PM
There are a few main problems with your code: The JavaScript code is incorrect; all HTMLInputElement objects have a value property which is what you're supposed to alter to change the textual content of it. Using innerHTML isn't correct, however, some browsers (Mozilla for one) apparently map innerHTML to value. Not exactly an error, but you don't need to use document.getElementById to do this type of thing, it will work in many more browsers if you use a more widely supported way of accessing form elements. Many of your attributes are missing a closing quote.
Here's the fixed code:
<script type="text/javascript">
//<![CDATA[
function appendValue(str)
{
document.forms[0]['t'].value += str;
}
//]]>
</script>
<form action="action.php">
<div>
<input type="button" value="<b>" onclick="appendValue('<b>');" />
<input type="button" value="</b>" onclick="appendValue('</b>');" />
<hr />
<textarea name="message" id="t" cols="76" rows="20"></textarea>
<hr />
<input type="submit" value="Submit" />
</div>
</form>You may also want to consider checking out Midas (http://www.mozilla.org/editor/midasdemo/).

Edited: Code is now fixed.

joonstar
12-22-2003, 01:50 AM
<script type="text/javascript">
//<![CDATA[
function appendValue(str)
{
document.forms[0]['t'].value += str;
}
//]]>
</script>
<form action="action.php">
<div>
<input type="button" value="<b>" onclick="addstuff('<b>');" />
<input type="button" value="</b>" onclick="addstuff('</b>');" />
<hr />
<textarea name="message" id="t" cols="76" rows="20"></textarea>
<hr />
<input type="submit" value="Submit" />
</div>
</form>



I made the above code as a test.
There is no other code except the above.

Altough I click the <b> or </b> button on the way of entering message, the <b>, o </b> isn't added to the message. and I think some javascript errors happens.


What is wrong in my application of your code?

fredmv
12-22-2003, 03:28 AM
Very sorry about that. I didn't change the name of the function calls inside the event handlers. Check the above (fixed) code.

joonstar
12-22-2003, 04:38 AM
Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum