How to open a url in a text box in a separate frame?

I'm working on a webpage that will consist of a large main frame, with a small frame across the bottom with a text box and submit button. I need the submit button to change the main frame to the url in the text box. My code is below, but it only works if the url ends in a file name (e.g., index.htm). It won't work if the url ends in .com or /folder/ where index.htm is assumed. How can I fix it?

Here is my html/javascript. In my index.htm I have:

<html>
<head>
<title>Menu Bar</title>
</head>
<frameset rows="*,30">
<frame src="main.html" name="main" id="main">
<frame src="menu.html" name="menu" id="menu">
</frameset>
<body>
</body>
</html>

The main.html is basically a blank html document (it has basic html, head, and body formatting only).

Here is menu.html:

<html>

<head>
<script language="JavaScript">
function go(){
URL = document.myForm.theURL.value;
parent.main.location=URL;
}
</script>

</head>
<body>

<form name="myForm">
<input type="text" name="theURL" size="50">
<input type="button" value="Go" onClick="go()">
</form>

</body>

</html>

Solution

I'm not sure why this happens, but you can use this workaround:

function go(){
    var URL = document.getElementById('myForm').theURL.value;
    if (URL) {
        url = URL.split('/');
        if (url[url.length - 1].indexOf('index.htm') < 0) {
            url[url.length] = 'index.htm';
            URL = url.join('/');
        }
    } else {return;}
    parent.main.location.href = URL;
    // or: parent.main.contentWindow.location.href = URL;
}

To use this, you need to set id="myForm" to form element.