Question

See code snippet below, or jsfiddle.

What I’m trying to do is type a url like, “google.com” into a textbox and set it so each time I press enter in the textbox it’ll direct to the site/url put down.

I tried the following below, but no luck. If anyone can help it’d be greatly appreciated.

$("#go").keyup( function(e) {
    if (e.keyCode == 13) {
        var sitesgohere = document.getElementById("sitesfool");
        sitesgohere.src = "https://" + document.searchme.ducks.value;
    }
});

$("#hidesearch, .search").hide();
$('.container').draggable();

$(".togglesearch").toggle(function() {
    $(".search").fadeIn(800);
    $("#hidesearch").show();
    $("#showsearch").hide();
}, function() {
    $(".search").fadeOut(400);
    $("#hidesearch").hide();
    $("#showsearch").show();
});

$("#go").click(function() {
    var siteurl = (document.sites.siteurl.value);
    
    var sitesgohere = document.getElementById("sitesfool");
    sitesgohere.src = "http://" + siteurl;
});

$("#searchthis").click(function() {
    var siteurl = (document.searchme.ducks.value);
    
    var sitesgohere = document.getElementById("sitesfool");
    sitesgohere.src = "https://duckduckgo.com/?q=" + siteurl;
});

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:rgb(0,156,156);
    overflow:hidden;}
    
div.nav {
    padding:5px;
    margin:0px 0px 0px 1%;
    width:98%;
    height:20px;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 0px 10px 10px;}
    
div.togglenav {
    cursor:pointer;
    position:absolute;
    top:0px;
    right:10px;
    padding:5px;
    width:20px;
    height:20px;
    margin:0px 0px 0px 1%;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 0px 10px 10px;}
    
form[name="sites"] {
    padding-left:0.5%;}
    
div.urlspace {
    position:absolute;
    top:5%;
    left:0px;
    width:100%;
    height:95%;}

div.containsearch {
    position:absolute;
    bottom:0px;
    left:0px;
    padding:15px 10px 10px 10px;
    width:auto;
    height:20px;
    background-color:rgba(0,0,0,0.7);
    box-shadow:0px 0px 8px rgba(0,0,0,1);
    border-radius:0px 10px 0px 0px;}
    
div.containsearch div {
    display:inline;}
    
div.togglesearch {
    position:relative;
    bottom:7px;
    cursor:pointer;
    float:right;
    margin-left:5px;
    width:auto;
    height:20px;
    overflow:hidden;}
    
#search {
    position:relative;
    bottom:7px;
    cursor:pointer;
    float:right;
    margin-left:5px;
    width:auto;
    height:20px;
    overflow:hidden;}
    
input[name="ducks"] {
    width:250px;}
    
form {
    position:relative;
    display:inline;
    padding:0;
    margin:0;
    top:-5px;}
    
svg {
    margin:5px 0px 0px 5px;
    padding:0px 5px 5px 0px;
    fill:white;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}
    
svg:hover {
    fill:#00ff00;}
    
svg#go {
    fill:#00bc00;
    transition:all 250ms ease-in-out;
    -webkit-transition:all 250ms ease-in-out;
    -moz-transition:all 250ms ease-in-out;
    -o-transition:all 250ms ease-in-out;
    -ms-transition:all 250ms ease-in-out;}
    
svg#go:hover {
    fill:#00ff00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="nav">
    <form name="sites">
        <input type="text" name="siteurl" style="width:80%;">
    </form>
    
    <svg id="go" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10">
        <polygon points="0,0  0,10  10,5">
    </svg>
</div>
    
<div class="urlspace">
    <iframe id="sitesfool" height="100%" width="100%" frameBorder="0" src="http://michaelsdelivery.tk/">
        Your browser does not support IFRAME's
    </iframe>
</div>
    
<div class="containsearch">
    <div class="search">
        <form name="searchme">
            <input type="text" name="ducks">
        </form>
        
        <svg id="searchthis" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10">
            <polygon points="0,0  0,10  10,5">
        </svg>
    </div>
    
    <div class="togglesearch">
        <svg id="hidesearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:10px 0px 0px 10px;">
            <polygon points="10,10  10,0  0,5">
        </svg>
        
        <svg id="showsearch" xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" height="10" style="margin:10px 0px 0px 10px;">
            <polygon points="0,0  0,10  10,5">
        </svg>
    </div>
</div>

Answer 1

Since your input element is inside a form, you need only a handler for the submit event, because it is triggered when the Enter key is pressed:

$("form[name='sites']").submit(function(e) {
    // TODO: extract a function with the contents of this click handler
    $('#go').click();

    e.stopPropagation();
    return false;
});​​​​​​​​​​​​​​​​​

.

A couple of comments on the style of the code:

• The fiddle is a weird mix of access to elements with jQuery, document.<element_name> and document.getElementById() — consider normalizing this, for example by using only jQuery;
• since you created custom buttons/links, adding cursor:pointer;cursor:hand; (or in the reverse order, can’t remember now) to the button’s hover class would be more web-friendly.