[SOLVED] button help

[LemonInflux]

I'm creating a contact form on my website, and am adding BBCode. Everything's fine, and it's done. My problem (well, not really a problem) is that I would like a way for users to easily add in BBCode. The way I decided on was like when you post on forums such as these, where above the post window you have buttons, dropdowns, smileys etc. you can just click and the BBCode will appear in your post. How is this done? I'm presuming it's javascript, because the URL the buttons link to is javascript:void(0);

 

So yeah, I'd like it if someone could tell me how to do this with buttons, dropdowns and images.

[phpQuestioner]

<script language="javascript">
function addstuff(what)
{
document.getElementById('forumpost').value += what;
document.getElementById('forumpost').focus();
}
</script>

<a href="javascript:void(0)" onclick="addstuff('')"><img src="http://www.phpfreaks.com/forums/Smileys/default/smiley.gif" border=0></a>

<br><br>

<textarea id="forumpost" style="width:500px;height:250px"></textarea>

[LemonInflux]

thanks. Will that work for buttons as wel?

[phpQuestioner]

yeah - just add the onclick event to a button - like so:

 

<input type="button" onclick="addstuff('')" value="Get Happy!">

[LemonInflux]

one last question; is there a way for the value of the button to change once clicked? Or, at least, reposition the cursor. I have a bold button ('['b']'), but on click I want it to change to '['/b']'. So yeah, how do I do this, or position the cursor between the 2 tags?

[phpQuestioner]

I'll have to get back to you on that.

[phpQuestioner]

here try this:

 

<script language="javascript">

// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	caretPos.select();
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text + end;

	if (textarea.setSelectionRange)
	{
		textarea.focus();
		textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
	}
	textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
	textarea.value += text;
	textarea.focus(textarea.value.length - 1);
}
}


// Remember the current position.
function storeCaret(text)
{
// Only bother if it will be useful.
if (typeof(text.createTextRange) != "undefined")
	text.caretPos = document.selection.createRange().duplicate();
}


// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

	if (temp_length == 0)
	{
		caretPos.moveStart("character", -text2.length);
		caretPos.moveEnd("character", -text2.length);
		caretPos.select();
	}
	else
		textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var newCursorPos = textarea.selectionStart;
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text1 + selection + text2 + end;

	if (textarea.setSelectionRange)
	{
		if (selection.length == 0)
			textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
		else
			textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
		textarea.focus();
	}
	textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
	textarea.value += text1 + text2;
	textarea.focus(textarea.value.length - 1);
}
}

window.onload=function() {
// Event Used To Ready IE For Caret Position Storage
document.postmodify.message.focus();
}
</script>

<form name="postmodify">
<textarea id="forumpost" name="message" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);" onfocus="storeCaret(this);" style="width:500px;height:250px"></textarea>
<br><br>
<input type="button" onclick="surroundText('[b]', '[/b]', document.forms.postmodify.message); return false;" value="Bold">
<input type="button" onclick="replaceText('', document.forms.postmodify.message); return false;" value="Get Happy!">
<form>

[LemonInflux]

No luck. :/

[phpQuestioner]

LemonInflux it works - I tested it............

[LemonInflux]

Not for me, it didn't. Unless I pasted it wrong. Give me a minute.

[phpQuestioner]

I just re-tested it and it worked........

[LemonInflux]

Yes, you're right; I must have pasted it wrong. Thanks, topic closed.

[phpQuestioner]

your welcome - glad it worked out for you 

[beansandsausages]

know its solved but thanks as well i have been trien to do sumit like this but with no sucsess.