HTML, CSS and JavaScript playground

<!doctype html>
<html lang="en">
<head></head>
<body onLoad="iFrameOn();">
    <form action="my_parse_file.php" name="myform" id="myform" method="post" onLoad="autosave_form();">
            <fieldset>
            <h2>Text Editor</h2>
            <p>Entry Title: <input name="title" id="title" type="text" size="80" maxlength="80" /></p>
            <p>Entry Body:<br />

</div>

</p><br />
            <input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
            </fieldset>
    </form>
</body>
</html>

// EDITOR.JS ============

function iFrameOn() {
	richTextField.document.designMode = 'On';
}

function iBold() {
	richTextField.document.execCommand('bold', false, null);
}

function iUnderline() {
	richTextField.document.execCommand('underline', false, null);
}

function iItalic() {
	richTextField.document.execCommand('italic', false, null);
}

function iFontSize() {
	var size = prompt('Enter a size 1-7', '')
	richTextField.document.execCommand('FontSize', false, size);
}

function iForeColor() {
	var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '')
	richTextField.document.execCommand('ForeColor', false, color);
}

function iHorizontalRule() {
	richTextField.document.execCommand('InsertHorizontalRule', false, null);
}

function iUnorderedList() {
	richTextField.document.execCommand('InsertUnorderedList', false, "newUL");
}

function iOrderedList() {
	richTextField.document.execCommand('InsertOrderedList', false, "newOL");
}

function iLink() {
	var linkURL = prompt('Enter the URL for this link:', 'http://')
	richTextField.document.execCommand('CreateLink', false, linkURL);
}

function iUnLink() {
	richTextField.document.execCommand('UnLink', false, null);
}

function iImage() {
	var imgSrc = prompt('Enter image location:', '');
	if(imgSrc != null){
	richTextField.document.execCommand('insertimage', false, imgSrc);
	}
}

/*
function submit_form() {
	var theForm = document.getElementByID("myform");
	theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
	theForm.submit();
}
*/

function autosave_form() {
	var theForm = document.getElementbyID('myform');
	theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
	setTimeout(yourFunction, 5000);
}

// AUTOSAVER.JS ============

// get the state of the form
function getFormState() {
    var fields = document.getElementsByTagName('form')[0].elements;
    if (fields.length == 0){return};
    for (var i = 1; i <= fields.length-1; i++) {
        var name = fields[i].getAttribute('name');
        if (name in localStorage && localStorage[name] !== null) {
            fields[i].value = localStorage[name];
        }
    }
}

// save the state of the form
function saveFormState() {
    var fields = document.getElementsByTagName('form')[0].elements;
    if (fields.length == 0){return};
    var populated = false;
    for (var i = 1; i <= fields.length-1; i++) {
        var name = fields[i].getAttribute('name');
        if (fields[i].value != '' && fields[i].getAttribute('type') != 'submit') {
           localStorage[name] = fields[i].value;
           populated = true;
        }
    }
    // display the time form data was saved (optional)
    if (populated) {
        var date = new Date();
        var hours = date.getHours();
        var mins = date.getMinutes();
        var secs = date.getSeconds();
        hours = (hours < 10) ? '0' + hours : hours;
        mins = (mins < 10) ? '0' + mins : mins;
        secs = (secs < 10) ? '0' + secs : secs;
        var msg = '[Form data was saved at ' + hours + ':' + mins + ':' + secs + ']';
        var timecont = document.getElementById('time_container');
        if (timecont !== null) {
            timecont.innerHTML = msg;
        }
        else {
            timecont = document.createElement('span');
            timecont.setAttribute('id', 'time_container');
            timecont.appendChild(document.createTextNode(msg));
            document.getElementsByTagName('fieldset')[0].appendChild(timecont);
        }
    }
}

// run the above functions when the web page is loaded
window.onload = function () {
    // check if HTML5 localStorage is supported by the browser
    if ('localStorage' in window && window['localStorage'] !== null) {
        // get the form state
        getFormState();
        // save the state of the form each 15 seconds (customizable)
        setInterval('saveFormState()', 15 * 1000);
    }
}