Aaron Holbach Aaron Holbach - 2 months ago 9
Javascript Question

Need this working code modified to open in a new window/tab

I know nothing of js and very little html, but have found and modified this bit of code found on this site to allow us to easily enter our printer hostnames to get to their config pages.

I'd like to embed this into a gadget, but need it to open into it's own tab/window if I do that. I have tried and have been unable to find code to do it.

Here's the code so far (working):

<html>
<body bgcolor=6D7E90>
<table id="content" height="30" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<script>
function go(){
window.location='http://'+document.getElementById('url').value;
}
</script>
<input type='text' id='url'>
<button id='btn_go' onclick='javascript:go();'>Go</button>
</td</tr>
</table>
</body>
</html>

L J L J
Answer

In order to help you out with your HTML/CSS, please refer to the following code.

Notes / Suggestions:

  • Use a DOCTYPE
  • window.location property would open the URL set to it in the same window
  • window.open method opens a new browser window with the URL which we set

Code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Printer Hostnames</title>

    <style>
        body {
            background-color: #6D7E90;
        }
    </style>

    <script>
        function go() {
            var url = 'http://' + document.getElementById('url').value;
            // open the url in a new browser window
            window.open(url);
        }
    </script>
</head>
<body>
    <table id="content" height="30" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <input type='text' id='url'>
                <button id='btn_go' onclick='javascript:go();'>Go</button>
            </td>
        </tr>
    </table>
</body>
</html>