Insert Into Text Area

tego10122 · 09-29-2008, 09:37 PM

I am making a php comment bbcode script , and I need <input type="button" name="underline" value="u">
to insert <u> </u> into <textarea name="comment"> </textarea>

tony · 09-29-2008, 11:11 PM

this might work

Code:

var element=document.getElementsByName('underline')[0];

element.onclick(function(){
    document.getElementsByName('comment')[0].innerHTML+='<u> </i>';
});

I am a newbie in javascript so I am not sure if it works

sketchMedia · 09-30-2008, 10:56 AM

Yes that would work, although there is one thing: the 'onclick' is a property that accepts a reference to a callback, therefore using it as a function will ultimatly end in an error:

Code:

this : element.onclick(function(){

produces this error:
getElementsByName("underline")[0].onclick is not a function

The correct code would be:

javascript Code:

var element=document.getElementsByName('underline')[0];

element.onclick = function(){
    document.getElementsByName('comment')[0].innerHTML+='<u> </i>';
};

This code can be made shorter:

javascript Code:

document.getElementsByName('underline')[0].onclick=function(){
        document.getElementsByName('comment')[0].innerHTML += "<u></u>"
    };

Or you could use jQuery:

javascript Code:

$('input#underline').click(function(){$('textarea#comment').text("<u></ul>")});

if you give the elements id's

tego10122 · 09-30-2008, 01:10 PM

what about if its a php form like below and the input field is $_POST['comment']

Code:

<hr><br>Post a comment<br>
	<form method=\"post\" action=\"members.php?id=$user[username]&comments=post\">
	<div style=\"background-color:grey\"><input type=\"button\" value=\"i\"><input name=\"underline\" onclick=\"var element=document.getElementsByName('underline')[0];

	element.onclick(function(){
    document.getElementsByName('$comment_box')[0].innerHTML+='<u> </u>';
	});\"type=\"button\" value=\"u\"><input type=\"button\" value=\"b\" ><input type=\"button\" value=\"img\"><a href=\"#\" onclick=\"smilie(':)'); return false;\" value=\"link\">Link</a></div>
	<textarea id=\"comment\" name=\"comment\" cols='47' rows='10'></textarea></br>
	<input style=\"align:right\" type=\"submit\" value=\"Post\" name=\"reply\">

tony · 09-30-2008, 05:58 PM

For a better practice it's better if you separate the javascript and css from the html code which in this case is embeded in php. It keeps clear separation for the coder.
and like sketchMedia, onclick is a reference callback so, roughly like this.

Code:

<hr><br>Post a comment<br>
	<form method=\"post\" action=\"members.php?id=$user[username]&comments=post\">
	<div style=\"background-color:grey\">
		<input type=\"button\" value=\"i\">
		<input name=\"underline\" \"type=\"button\" value=\"u\">
		<input type=\"button\" value=\"b\" >
		<input type=\"button\" value=\"img\">
		<a href=\"#\" onclick=\"smilie(':)'); return false;\" value=\"link\">Link</a>
	</div>
	<textarea id=\"comment\" name=\"comment\" cols='47' rows='10'></textarea>
	</br>
	<input style=\"align:right\" type=\"submit\" value=\"Post\" name=\"reply\">
	<script type=\"text/javascript\">
		document.getElementsByName('underline')[0].onclick=function(){
        document.getElementsByName('comment')[0].innerHTML = \"<u></u>\"
    };
	</script>

but yeah jquery is better

thanks for the tip sketchMedia

P.D. it would be good if you create a generic onclick function and a parameter which would have what kind of tag is going to be added to the textarea. that's my .5cents

tego10122 · 09-30-2008, 06:58 PM

I still don't understand what the Onclick Call command will be for the button.. :)

tony · 09-30-2008, 07:15 PM

in your current for you have a onclick attribute in a input tag, here:

HTML Code:

<input name=\"underline\" onclick=\"

that attribute would make sure that whatever value it has would be run when the element is clicked.

the good practiced is in order to avoid combining scripting with markup we use the onclick event handler in javascript. by just assigning the onclick variable of a element in javascript with code like here

Code:

document.getElementsByName('underline')[0].onclick=function(){
        document.getElementsByName('comment')[0].innerHTML = "<u></u>"
    };

in there we assigned the function(){...} to the onclick event of the element document.getElementsByName('underline')[0] which is the element <input name="underline" />

that is why we use the onclick in javascript instead of using it in the markup

RobertK · 10-01-2008, 03:59 PM

No offense, but if you use innerHTML the cursor location isn't saved, and if you don't use += or = innerHTML + "<u></u>" all content will be replaced. This will just anger users.

I would suggest reading this tutorial and adapting it to your needs. This is the same thing I used for my work but I got a bit fancy with it; however, this is a great place to start from.

tego10122 · 10-01-2008, 04:00 PM

@RobertK , that tutorial was awesome.

RobertK · 10-01-2008, 04:14 PM

Glad you liked it, I found it helpful as well. Remember, if you struggle with something in Javascript, check the Mozilla Developer Reference. The Mozilla folks at least indicate what is, and what isn't, cross-browser compatible--and so are a great all-in-one reference for most subjects.

tony · 10-01-2008, 05:21 PM

I forgot about the +=, good resource thanks man.