Forms

by Susan Delgado

HTML

<form name="theform" id="theform" action="">
    <input type="text" id="txt" value="" />
    <br/>
    <textarea id="txtarea">Text will go here for the form</textarea>
    <br/>
    <select id="opt" name="option">
        <option value="0">one</option>
        <option value="1">two</option>
        <option value="2">three</option>
         <option value="3">four</option>
        <option value="4">five</option>
        <option value="5">six</option>
    </select>
       <br/>
    <!-- Red: <input type="checkbox" name="color" value="red" />
       <br/>
    Blue <input type="checkbox" name="color" value="blue" />
       <br/>
    Yellow: <input type="checkbox" name="color" value="yellow" />
       <br/> -->
  
       <br/>
    Green: <input type="radio" name="color" value="green" />
       <br/>
    Black: <input type="radio" name="color" value="black" />
       <br/>
    Blue: <input type="radio" name="color" value="blue" />
       <br/>
    <input type="button" id="btn" value="click here" />
</form>

JavaScript

(function () {
    var util = {
        //cross browser Events
        addEvent: function (el, type, fn) {
            if (typeof addEventListener !== "undefined") {
                el.addEventListener(type, fn, false);
            } else if (typeof attachEvent !== "undefined") {
                el.attachEvent("on" + type, fn);
            } else {
                el["on" + type] = fn;
            }
        },
        removeEvent: function (el, type, fn) {
            if (typeof removeEventListener !== "undefined") {
                el.removeEventListener(type, fn, false);
            } else if (typeof detachEvent !== "undefined") {
                el.detachEvent("on" + type, fn);
            } else {
                el["on" + type] = null;
            }
        },
        getTarget: function (event) {
            if (typeof event.target !== "undefined") {
                return event.target;
            } else {
                return event.srcElement;
            }
        },
        preventDefault: function (event) {
            if (typeof event.preventDefault !== "undefined") {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        }
    };



    var form = document.getElementById("theform"),
        btn = form.btn,
        txt = form.txt,
        txtarea = form.txtarea,
        select = form.opt,
        color = form.color;
    util.addEvent(form, "submit", function (e) {
        util.preventDefault(e);

    });
    util.addEvent(btn, "click", function (e) {
        var target = util.getTarget(e);
        var index = select.selectedIndex;
        var opt = select.options[index];
        //or selectedOptions which can give a collection and because we only have one option 0 is the index we would use.
        var option = select.selectedOptions[0];
        // alert(option.value);
        select.remove(4); //remove six
        //create a new option
        var created = new Option("newOption...