Inserting text into a text field when a div class is clicked

Question

I Am creating this submission system right now. I want to create it so that it inserts some text (like [b][/b]) when a div is clicked. This is the sample we're working with:

<div class="insertBBC" title="Bold Text" onClick="moveNumbers([b][/b])" id="bold">
                        <p>B</p>    
                    </div>  
                    <div class="insertBBC" title="Italic Text">
                        <p>I</p>
                    </div>
                    <div class="insertBBC" title="Bullet Points">
                        <p>BP</p>

etc...
I also want it so when there is already content in the text field, it will not remove anything from there, also, It should add the [b][/b]tags where the cursor was at. And when the text is selected, it will place the [b] tag infront of the selection and the [/b] tag at the back. Kind of like BBC Works. I have no idea how can I achieve any of this, I've researched for quite a while, I see people telling its only possible with JQuery, and I don't know Jquery nor JS yet so yeah.. I'd avoid it if possible.

Also, these are the textboxes. There are two of them and I'd want to insert into the one that is currently active.

<br><textarea name="newPost" placeholder="Post Preview(Will Be Displayed on the Index Page)" cols="100"  rows="10"/></textarea><br>
<br><textarea name="newPostPreview" placeholder="Post Text" cols="100"  rows="10"/></textarea>

Any leads? Thanks :)

Answer 1

Unfortunately your only option is to use jQuery or Javascript (or some other browser-side library). PHP only deals with server-side code and can spit out the html fields that you want to use but it can't interact with elements after the page has been loaded into the browser.

I can t explain to you how to use jQuery but only that it is well worth it to start learning it now. It's very easy to do simple things with it, so don't be intimidated.

Here's what I would suggest to get started: Loading the most recent jQuery library by using this tag:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Then you'd target the appropriate buttons and do something when they are clicked on:

$("#boldButtonID").click(function(){
    //get the index of the cursor
    //select the word that the cursor is on by stopping at the space (" ") character in either direction, then insert [b] and [/b] in the appropriate locations.
}

You can also get the text that is selected by using this function, which I got here: Get the Highlighted/Selected text

function getSelectionText() {
var text = "";
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}
return text;
}

Then you can use the functions .before().html("[b]") and .after().html("[/b]") to place your tags where you need.

I hope that helps shed some light on what you'd need to do.

Cheers!