Javascript in my select form will not work for a textarea field

Hello I exhausted my search for an answer regarding this and nothing can answer what I am looking for.

I have a message board where I want to create a drop down menu full of pre-made templates using static html. The idea is this: the 开发者_Go百科poster wants to load a pre-made html tags into the body of their message from an form drop down menu. I got this to work perfectly with Firefox... but of course, IE doesn't support onclick to call the javascript. In my research, I have tirelessly tried to get onchange on the to call my javascript and I can't seem to get it to work ._. any help would be appreciated! thanks.

Below are the js and form that WORKS in Firefox. What is not showing here is that there is a textarea which is populated by the values evoked by the script.

JAVASCRIPT:

function add_event_setup()
{
document.dataform.bodytext.value += "<center><img src=\"../../images/kick_ass_title.jpg\"><br><span class=\"event_title\">INSERT TEXT</span><br><br><table width=\"500\" bgcolor=\"#FF0000\"><tr><td bgcolor=\"#000000\"></td></tr></table></center>";
}


THE FORM:

<select class="formselect">
  <option value="Setup" class="formselect">--Setup--</option>
  <option value="Setup1" onclick="add_event_setup()" style="border: 1px solid gray" class="formselect">Setup 1</option>
</select>

Try any of the following 3:

1st way

JAVASCRIPT

 function add_event_setup(selectElement) {

var val = selectElement.value;

if(val == "TF")
    alert("DO THIS");
else if(val == "JR")    
    alert("DO THAT");
else
    alert("something else"); }

HTML

<select class="formselect" onchange="add_event_setup(this);"> 
    <option value="Game Terms" class="formselect">--Game Terms--</option>
    <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
    <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
</select>

2nd way

HTML + JAVASCRIPT (Make sure the script tag is placed after the select tag as shown below)

<select id="myform" class="formselect"> 

    <option value="Game Terms" class="formselect">--Game Terms--</option>
    <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
    <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
</select> 
<script>
document.getElementById("myform").addEventListener("change", function() {

    var val = this.value;

    if(val == "TF") {

        alert("DO THIS");
    } else if(val == "JR") {

        alert("DO THAT");

        } else
         alert("something else");


        }, false);
        </script>

3rd way

Just in case you use jQuery:

JAVASCRIPT

    var MySelector = {

        setup : function() {

            $('#myform').bind('change', function() {

                var val = $(this).val();

                if(val == "TF") {

                    alert("DO THIS");
                } else if(val == "JR") {

                    alert("DO THAT");

                } else
                     alert("something else");           

            });

        }

    };

    $(document).ready(function() {

        MySelector.setup();
    });

HTML

    <select id="myform" class="formselect"> 

        <option value="Game Terms" class="formselect">--Game Terms--</option>
        <option value="TF" style="border: 1px solid gray" class="formselect">TimeFrame</option>
        <option value="JR" style="border: 1px solid gray" class="formselect">Jim Ross</option>
    </select>

You need to catch the onchange event of the select. 

<select onchange="if(this.options[this.selectedIndex].value=='Setup1') add_event_setup();">

If you want to handle each option individually:

<script language="javascript">
    function handleChange(selectObject){
        switch(selectObject.options[selectObject.selectedIndex].value){
            case 'Setup':
                //handle Setup value
                break;
            case 'Setup1':
                //handle setup1
                break;
            default:
                //something by default, if you want
        }
    }
</script>
<select name="asdf" onchange="handleChange(this);">
    <option value="Setup">Setup</option>
    <option value="Setup1">Setup1</option>
</select>