richtextbox save and link to other text box

Greetings to all programers! I am trying to learn JavaScript by creating richtextbox and link it to other textbox. But it does not work. I hope anyone could help me to find fault.

Thanks a lot in advance. Moreover, if I put form method = post, the whole function is not working and disappears once I insert content.

Below I attach my code:

<style>

div#textEditor{
margin:0 auto;
width:750px;
height:300px;

}
div#theRibbon{
    border-bottom:none;
    padding:10px;
    background-color:rgb(40,110,89);
    color:#FFF;
    border-radius:8px 8px 0px 0px;
}
div#richTextArea{
    border:2px solid rgb(40,110,89);
    height:100%;
    width:746px;
}
iframe#the{
    height:100%;
    width:100%; 
}
</style>
<script>
window.addEventListener("load",function(){
    var editor = the.document;
    editor.designMode = "on";
    boldButton.addEventListener("click",function(){
        editor.execCommand("Bold",false,null);

        },false);
        italicButton.addEventListener("click",function(){
        editor.execCommand("Italic",false,null);

        },false);
        underlineButton.addEventListener("click",function(){
        editor.execCommand("Underline",false,null);

        },false);
    },false);
    $(document).on("click","#SubmitButton",function(e) {
    e.preventDefault();
    var the = advancedEditor.getText();
    var the = $("#the").val();
    console.log(the);
});
</script>
</head>

<body>
<div id="textEditor">
<div id="theRibbon">
<button id="boldButton" title="Bold"><b>B</b></button>
<button id="italicButton" title="Italic"><em>I</em></button>
<button id="underline" title="Underline"></button>
<input type="color" id="fontColorButton" title="Change Font Color" />
<select id="fontchanger">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier">Courier</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
<select id="fontsizechanger">
<script>
for(var i= 1; i < 10; i++){
    document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select>
</div>
<div id="richTextArea">
<iframe id="the" name="the" frameborder="0"></iframe>
<textarea name="the" id="the1"></textarea>
<input type="submit" class="" id="SubmitButton" />
</div>
</div>
<script>
var fonts = document.querySelectorAll("select#fontchanger > option");
for(var i = 0;i < fonts.length; i++){
    fonts[i].style.fontFamily = fonts[i].value;
}
</script>
</body>
</html>