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?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:

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

0
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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
All Courses

From novice to tech pro — start learning today.