Text does not wrap around drop down selections.

Im trying to make it so when a user selects a colour from the drop down menu. it wraps the code around the highlighted text.

<select id="color" onchange="setColor(this.value);">
                          <option value="" selected="selected">Change Color</option>
    <option value="black" style="background-color:black;">Black</option>
    <option value="red" style="background-color:red;">Red</option>
    <option value="yellow" style="background-color:yellow;">Yellow</option>
    <option value="pink" style="background-color:pink;">Pink</option>
    <option value="green" style="background-color:green;">Green</option>
    <option value="orange" style="background-color:orange;">Orange</option>
    <option value="purple" style="background-color:purple;">Purple</option>
    <option value="blue" style="background-color:blue;">Blue</option>
    <option value="beige" style="background-color:beige;">Beige</option>
    <option value="brown" style="background-color:brown;">Brown</option>
    <option value="teal" style="background-color:teal;">Teal</option>
    <option value="navy" style="background-color:navy;">Navy</option>
    <option value="maroon" style="background-color:maroon;">Maroon</option>
    <option value="limeGreen" style="background-color:limegreen;">Lime Green</option>
    <option value="white">White</option>
  </select>

Below is the javascript for this
function setColor(color) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[color=" + color + "][/color]";
}
function setsize(size) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[size=" + size + "][/size]";
}

function initialise() {
var element = document.getElementById('element-id');

if (element && element.style)
element.style.display = 'none';
}

function toggleDisplay(element) {
var style;

if (typeof element == 'string')
element = document.getElementById(element);
if (element && (style = element.style))
style.display = (style.display == 'none') ? '' : 'none';
}

if (!document.getElementById)
document.getElementById = function() {return null;};


function wrapText(el, openTag, closeTag) {
if (el.setSelectionRange) {
// W3C/Mozilla
el.value = el.value.substring(0,el.selectionStart) + openTag + el.value.substring(el.selectionStart,el.selectionEnd) + closeTag + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
// IE code goes here
el.focus(); //or else text is added to the activating control
var range = document.selection.createRange();
range.text = openTag + range.text + closeTag;
}
}

Open in new window

runnerjp2005Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Here

<script>
function setColor(theSel) {
  var color = theSel.options[theSel.selectedIndex].value;
  var textbox = document.getElementById('inputforum');
  textbox.value += "[color=" + color + "][/color]";
}
window.onload=function() {
  document.getElementById('colorSel').selectedIndex=0;
}

</script>
<textarea id="inputforum"></textarea>
<select id="colorSel" 
onchange="if (this.selectedIndex>0) setColor(this);">
    <option value="" selected="selected">Change Color</option>
    <option value="black" style="background-color:black;">Black</option>
    <option value="red" style="background-color:red;">Red</option>
    <option value="yellow" style="background-color:yellow;">Yellow</option>
    <option value="pink" style="background-color:pink;">Pink</option>
    <option value="green" style="background-color:green;">Green</option>
    <option value="orange" style="background-color:orange;">Orange</option>
    <option value="purple" style="background-color:purple;">Purple</option>
    <option value="blue" style="background-color:blue;">Blue</option>
    <option value="beige" style="background-color:beige;">Beige</option>
    <option value="brown" style="background-color:brown;">Brown</option>
    <option value="teal" style="background-color:teal;">Teal</option>
    <option value="navy" style="background-color:navy;">Navy</option>
    <option value="maroon" style="background-color:maroon;">Maroon</option>
    <option value="limeGreen" style="background-color:limegreen;">Lime Green</option>
    <option value="white">White</option>
  </select>

Open in new window

0
runnerjp2005Author Commented:
tried the above code and sadly just adds it to the end line of text
0
Michel PlungjanIT ExpertCommented:
ah. Apologies. The code for the select did not work at all. I now understand your question. I'll find some code later. You need to use document.selection and more. Why invent the hot water when tinyEDIT will do the job.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

runnerjp2005Author Commented:
It was a learing proccess tvia using php ect :)...

I would love to finish off re inventing hotwater ;)
0
runnerjp2005Author Commented:
humm took a look and gone right over my head...

With buttons i do this:  <input type='button' value='B' name='btnBold' onclick='wrapText(document.getElementById(&#39;inputforum&#39;),&#39;[b]&#39;,&#39;[/b]&#39;);'/>


Anyway i can apply it to the dropdowns?
0
Michel PlungjanIT ExpertCommented:
Sorry - I could not read your code on my mobile

Yes of course. Not clever of me not to scroll down to see you have the means to do what you want

 onChange='wrapText(document.getElementById(&#39;inputforum&#39;),&#39;[color=\''+this.form.color.value+'\']&#39;,&#39;[/b]&#39;);'/>

for example

Let me know how you get along I am so very busy - I will have more time tomorrow
0
runnerjp2005Author Commented:
Tried it and didnt do anything ...not even inset [color.....][/color]
0
Michel PlungjanIT ExpertCommented:
Hard to read it - should have fixed the &39; and no need to pass the form.color since there are no form tags and we are IN the select

try (watch the single quotes)

<select id="color" onChange="if (this.selectedIndex>0)wrapText(document.getElementById('inputforum'),'[color=\''+this.value+'\']','[/color]');"/>

0
runnerjp2005Author Commented:
how do i get rid of the quotes??

Itried and both 1ns i delete dont work
0
Michel PlungjanIT ExpertCommented:
sorry I do not understand what you mean.
0
runnerjp2005Author Commented:
sorry.

The current output is [colour='red']   i need it to just be [color=red]

I have attempted to take out the quotes and then the code does not work
0
Michel PlungjanIT ExpertCommented:

<select id="color" onChange="if  (this.selectedIndex>0)wrapText(document.getElementById('inputforum'),'[color='+this.value+']','[/color]');"/>

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.